I am currently developing an app that utilizes Bootstrap 4 and the material design framework. My goal is for this app to fill the entire screen and incorporate the drawers provided by the framework. While I have successfully implemented a flexbox to make the app fill the screen, I am facing a challenge in getting the drawer to occupy all available height. You can observe this issue in this Fiddle example. The code snippet featured in the Fiddle is as follows:
<div id="app" class="d-flex flex-column h-100">
<nav class="navbar sticky-top banner">
<a class="navbar-brand" href="#">My App</a>
</nav>
<div class="d-flex flex-column flex-grow">
<div class="h-100 flex-grow">
<div class="bmd-layout-container bmd-drawer-f-l bmd-drawer-overlay">
<div id="appDrawer" class="bmd-layout-drawer bg-faded">
<div class="container">
<header>Hello</header>
<p>
This is a longer block of information text.
Regardless of how long this block of text is,
the drawer should extend all the way to the footer.
</p>
</div>
</div>
<main class="bmd-layout-content">
<div class="container">
<h1>
Hello
</h1>
<button class="btn btn-primary btn-raised" data-toggle="drawer" data-target="#appDrawer">Show Info</button>
</div>
</main>
</div>
</div>
<footer>
<p>Thank you for visiting!</p>
</footer>
</div>
Could someone please advise me on how to ensure that the drawer occupies the full height between the nav and footer sections?
Appreciate your help!