How to use Bootstrap 4 flexbox to fill available content?

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

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.

The problem, when using ZimSystem's markup in your Angular plunker, is that the component is inserted in the rendered HTML as an additional container with the flex tag:

<div class="d-flex flex-column h-100">    <nav class="navbar navbar-toggleable-md sticky-top bg-faded">        ...    </nav>    <router-outlet></router-outlet>    <flex>        <div id="outer" class="d-flex flex-column flex-grow">            ...        </div>    </flex></div>

In order to make it work as intended, you can remove the outer div from the component and set the flex classes on the component's host container, as shown in this modified plunker.

import {Component, NgModule, HostBinding, VERSION} from '@angular/core'import { RouterOutlet, RouterModule } from '@angular/router' import {BrowserModule} from '@angular/platform-browser'@Component({    selector: 'flex',    template: `        <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>    `})export class FlexComponent {    @HostBinding('class') classes = 'd-flex flex-column flex-grow';      ...}