How to use Bootstrap 4 flexbox to fill available content?

Question

I have an angular app that uses bootstrap 4. I have a nav bar that sticks to the top, and I want to add content that fills the remaining space in the browser. Aside from the navbar at the top, I have another div that itself contains header and footer content. Between the header and footer, I have a main content section, and I want that section (#two in my example below) to fill all empty space.

I thought I could use css flexbox to accomplish this, but my simple non-bootstrap flexbox example seemed to do nothing when I moved into the bootstrap world. I was using these docs to try to figure this out.

I thought using align-self-stretch should help accomplish this goal, but it sort of looks like the containing elements might be sizing themselves just big enough to hold my #outer content, so there's no flexbox expanding to be done. I tried naively just adding height:100% styles to the containing divs just to try to get some stretching, but that didn't seem to help.

I created this plunker example based on @ZimSystem's response. His codeply example seemed to work exactly as I wanted, but when I tried to piece the changes into my simple angular code, the flex stretching didn't happen. I'm not sure what I'm doing to break it in the conversion.

This is the entirety of the angular component I am viewing at the moment:

<div id="outer" class="d-flex flex-column flex-grow">     <div id="one" class="">         header content <br>         another line <br>         And another     </div>     <div id="two" class="bg-info h-100 flex-grow">         main content that I want to expand to cover remaining available height     </div>     <div id="three" class="">         footer content     </div> </div> 

And here's the application container showing the navbar and injection point:

<div class="d-flex flex-column h-100">     <nav class="navbar navbar-toggleable-md sticky-top bg-faded">         <a class="navbar-brand" href="#">             <h1 class="navbar-brand mb-0">My App</h1>         </a>         <ul class="navbar-nav">              <li class="nav-item"><a class="nav-link" routerLink="/flex">My flex view</a></li>         </ul>     </nav>     <router-outlet></router-outlet> </div>   

How can I get my #two div to expand to fill the space while having my #one and #three divs acting as content headers and footers anchored to the top and bottom of the content area?

Answer 1

Update Bootstrap 4.1.0

The flex-grow-1 and flex-fill classes are included in Bootstrap 4.1.0

Update Bootstrap 4.0.0

Add a flex-grow class like this:

.flex-grow {     flex: 1 0 auto; } 

Then, the utility classes can be used for the rest of the layout:

 <div class="d-flex flex-column h-100">     <nav class="navbar navbar-toggleable-md sticky-top bg-faded">         <a class="navbar-brand" href="#">             <h1 class="navbar-brand mb-0">My App</h1>         </a>         <ul class="navbar-nav">             <li class="nav-item"><a class="nav-link">Item 1</a></li>         </ul>     </nav>     <div id="outer" class="d-flex flex-column flex-grow">         <div id="one" class="">             header content             <br> another line             <br> And another         </div>         <div id="two" class="bg-info h-100 flex-grow">             main content that I want to expand to cover remaining available height         </div>         <div id="three" class="">             footer content 40px height         </div>     </div> </div> 

https://www.codeply.com/go/3ZDkRAghGU

Here's another example with on Bootstrap 4.3.1 that has a navbar, sidebar and footer with scrolling content area: https://www.codeply.com/go/LIaOWljJm8

Answer 2

Your component is wrapped into a <flex> element that needs the same flexbox styling to stretch vertically as well, allowing it's content to stretch with it. So adding class="d-flex flex-column flex-grow" to the <flex> will work. Here's a working fork of your plunker example.