I'm attempting to design a layout featuring a top navbar and a collapsible left menu.
On medium-sized screens or smaller, the left menu should remain hidden. However, it needs to occupy the full height of the page at all times, regardless of its actual size.
Below is the code I currently have:
<div class="container-fluid h-100 mh-100 no-gutters pl-0">
<div class="d-flex h-100">
<div class="bg-dark h-100 mh-100 d-none d-md-block" style="min-width: 18rem; max-width: 22rem;">
<ul class="list-group p-2">
<li class="list-group-item">
<a href="#" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Parent - Test</a>
<ul class="list-group collapse" id="multiCollapseExample2">
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
<li class="list-group-item">Test</li>
</ul>
</li>
</ul>
</div>
<main role="main" class="flex-grow-1 pl-3 h-100 mh-100">
Here is main content....
</main>
</div>
</div>
Here is a fiddle link showcasing my code https://jsfiddle.net/7fcahme8/
Upon rendering the page, you'll notice that the left menu occupies 100% height. However, when clicking on "Parent - Test" on the left, the menu overflows the div which needs fixing. I want the left divider to expand as its content expands.
How can I ensure the left menu expands 100% of the time, regardless of its content?
I'm aiming to extend the left menu divider for expansion purposes. In the screenshot linked below, you can see that the list-group grows more than the menu: https://i.sstatic.net/bBxhj.png