title: How to use Bootstrap 4 flexbox to fill available content?
body: <p>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 (<code>#two</code> in my example below) to fill all empty space. </p>
  
  <p>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 <a href="https://v4-alpha.getbootstrap.com/utilities/flexbox/" rel="noreferrer">these docs</a> to try to figure this out.</p>
  
  <p>I thought using <code>align-self-stretch</code> should help accomplish this goal, but it sort of looks like the containing elements might be sizing themselves just big enough to hold my <code>#outer</code> content, so there's no flexbox expanding to be done. I tried naively just adding <code>height:100%</code> styles to the containing divs just to try to get some stretching, but that didn't seem to help.</p>
  
  <p>I created this <a href="https://plnkr.co/edit/TCMq9fI2XqtZNQ1S6OZQ?p=preview" rel="noreferrer">plunker example</a> 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.</p>
  
  <p><a href="https://i.stack.imgur.com/TwK24.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TwK24.png" alt="enter image description here"></a></p>
  
  <p>This is the entirety of the angular component I am viewing at the moment:</p>
  
  <pre><code>&lt;div id="outer" class="d-flex flex-column flex-grow"&gt;
      &lt;div id="one" class=""&gt;
          header content &lt;br&gt;
          another line &lt;br&gt;
          And another
      &lt;/div&gt;
      &lt;div id="two" class="bg-info h-100 flex-grow"&gt;
          main content that I want to expand to cover remaining available height
      &lt;/div&gt;
      &lt;div id="three" class=""&gt;
          footer content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the application container showing the navbar and injection point:</p>
  
  <pre><code>&lt;div class="d-flex flex-column h-100"&gt;
      &lt;nav class="navbar navbar-toggleable-md sticky-top bg-faded"&gt;
          &lt;a class="navbar-brand" href="#"&gt;
              &lt;h1 class="navbar-brand mb-0"&gt;My App&lt;/h1&gt;
          &lt;/a&gt;
          &lt;ul class="navbar-nav"&gt; 
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" routerLink="/flex"&gt;My flex view&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>How can I get my <code>#two</code> div to expand to fill the space while having my <code>#one</code> and <code>#three</code> divs acting as content headers and footers anchored to the top and bottom of the content area?</p>