Angular 如何使用 Bootstrap 4 flexbox 填充可用内容

我有一个使用Bootstrap4的棱角应用程序，我有一个粘在顶部的导航栏，我想添加填充浏览器剩余空间的内容.除了顶部的导航栏之外，我还有另一个div，它本身包含页眉和页脚内容.在页眉和页脚之间，我有一个主要内容部分，我希望该部分(下面示例中的#two)填充所有空白.

我以为我可以使用css flexbox来实现这一点，但当我进入bootstrap世界时，我简单的非 bootstrap flexbox示例似乎什么都做不了.我用了these docs来解决这个问题.

我认为使用align-self-stretch应该有助于实现这一目标，但看起来包含元素的大小可能刚好足以容纳我的#outer内容，所以没有flexbox扩展要做.我天真地try 在包含的div中添加height:100%种样式，只是为了进行一些拉伸，但这似乎没有帮助.

我根据@ZimSystem的响应创建了这个plunker example.他的代码编写示例似乎完全按照我的期望工作，但是当我试图将这些更改分段到我的简单Angular 代码中时，伸缩并没有发生.我不确定我该怎么做才能在转换过程中打破它.

这是我现在看到的整个Angular 分量:

<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>

下面是显示导航栏和注入点的应用程序容器:

<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>  

如何让我的#two div扩展以填充空间，同时将#one和#three div作为内容页眉和页脚锚定在内容区域的顶部和底部？