title: Full height flexbox, to grow with content
body: <p>I have a basic two-column flexbox layout (side menu, header, main content).</p>
  
  <p>I want my side menu to have a fixed width, but grow in height to whatever 100% of the entire page is. For my main content there's a fixed height header and a dynamic height content pane, I want the background of that pane to also fill down 100% of the available height.</p>
  
  <ul>
  <li>If the screen's height is tall enough to contain all of the content everything works great</li>
  <li>If the screen's height cannot contain everything (eg: requires scrolling) then 1) the menu's background only goes down to the bottom of the original viewport and 2) the main content's background is lower [but still not full height] because the header pushes it down some.</li>
  </ul>
  
  <p>When the main content extends past the available height and scrolling is required, the background does not extend all the way down to the page</p>
  
  <p>Looking at the intersection between black, gray, and the console window... left side black bg is menu with static content, right side gray bg is main content with growing content, bottom white bg in second two images is wtf?</p>
  
  <ol>
  <li>Before data is loaded, without scrolling down at all</li>
  <li>Before data is loaded, with scrolling down to end of page</li>
  <li>After data is loaded, with scrolling down to end of page</li>
  </ol>
  
  <p>I can't tell if height 100% attached to html,body is actually doing anything, as removing them does not change the behavior, still same as the below screenshots.</p>
  
  <p><a href="https://i.stack.imgur.com/2qTya.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2qTya.png" alt="preload prescroll"></a></p>
  
  <p><a href="https://i.stack.imgur.com/R5FE5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/R5FE5.png" alt="preload postscroll"></a></p>
  
  <p><a href="https://i.stack.imgur.com/8F4DN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8F4DN.png" alt="postload postscroll"></a></p>
  
  <p>See fiddle <a href="http://jsfiddle.net/joshuaohana/mg0ybfo5/6/" rel="noreferrer">here</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  
  .flex-row.flex-fill {
    height: 100%;
  }
  
  .flex-col {
    display: flex;
    flex-direction: column;
    flex-flow: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  
  .flex-col.flex-fill {
    width: 100%;
  }
  
  .flex-right {
    margin-left: auto;
  }
  
  .menu {
    width: 200px;
    background-color: blue;
    color: $white;
    padding: 15px;
    height: 100%;
    flex-grow: 1;
  }
  
  .header {
    background-color: red;
    padding: 15px;
    font-family: italic;
    font-size: 1.5em;
  }
  
  .main-content {
    background-color: green;
    height: 100%;
    flex-grow: 1;
    padding-bottom: 30px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-row flex-fill"&gt;
    &lt;div class="flex-col"&gt;
      &lt;div class="menu"&gt;
        &lt;ul&gt;
          &lt;li&gt;menu item&lt;/li&gt;
          &lt;li&gt;menu item&lt;/li&gt;
          &lt;li&gt;menu item&lt;/li&gt;
          &lt;li&gt;menu item&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="flex-col flex-fill"&gt;
      &lt;div class="header"&gt;header&lt;/div&gt;
      &lt;div class="main-content"&gt;main content&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>