title: Make 3 divs fit window height using flexbox
body: <p>How do I make 3 separate divs stretch to the height of the screen without overflow kicking in?</p>
  
  <p>I am using bootstrap and flexbox, but whenever I set the height of the row to 100%, overflow kicks in.</p>
  
  <p>I would like 'content' (yellow area) to fill the bulk of the page and the header (aqua area) and footer (pink area) taking up only 100px.</p>
  
  <p>I have played around with flex-grow and stretch with no avail.</p>
  
  <p>Thanks in advance for any helpful input.</p>
  
  <p><a href="https://jsfiddle.net/7xtybdrm/1/" rel="nofollow">https://jsfiddle.net/7xtybdrm/1/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body {padding-top: 51px;}
  html, body {
      background-color: rgb(48, 48, 48);
      height: 100%;
  }
  
  .body-container {
      height: 100%;
      display: flex;
      flex-direction: column;
  
  }
  
  .ribbon-container {
      background-color:aqua;
      height: 100px;
      flex: 1;
  }
  
  .content-container {
      background-color: yellow;
      display: flex;
      flex: 2;
  }
  
  .footer-container {
      height: 50px;
      background-color: pink;
      display: flex;
      flex: 1;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;asdfasdf.com&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-center"&gt;
                      &lt;li&gt;&lt;a href="../Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="../Pages/About.aspx"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="active"&gt;&lt;a href="../Pages/Applications.aspx"&gt;Applications&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="conatiner-fluid body-container col-lg-12"&gt;
          &lt;div class="row"&gt;
              &lt;div class="container-fluid ribbon-container"&gt;
                  Ribbon
              &lt;/div&gt;
  
  
              &lt;div class="content-container"&gt;
                  Content
              &lt;/div&gt;
  
  
              &lt;div class="footer-container"&gt;
                  Footer
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>