title: Flexgrid holy grail with 100% height
body: <p>I have a twist on the "holy grail" layout and you'll notice that the <code>#main</code> has a <code>min-height: 800px</code>.  What I'm really looking for is 100% height, then as I add content within the <code>section</code> the rest of the layout continues down with it (as it currently does).</p>
  
  <p>Any idea how to achieve this, with 100% height and not explicitly setting 800px?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font: 24px Helvetica;
    background: #999999;
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
  #main {
    min-height: 800px;
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row;
  }
  
  #main&gt;article {
    border: 1px solid #cccc33;
    background: #dddd88;
    flex: 3 1 60%;
    order: 3;
  }
  
  #main&gt;nav {
    border: 1px solid #8888bb;
    background: #ccccff;
    flex: 1 6 70px;
    order: 1;
    max-width: 70px;
    min-width: 70px;
  }
  
  #main&gt;aside {
    border: 1px solid #8888bb;
    background: #ccccff;
    flex: 1 6 300px;
    order: 2;
    max-width: 300px;
    min-width: 300px;
  }
  
  header {
    display: block;
    padding: 5px;
    min-height: 70px;
    border: 1px solid #eebb55;
    background: #ffeebb;
  }
  
  section {
    margin: 10px;
  }
  
  .container {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row;
  }
  
  .container&gt;.field {
    width: 100%;
    background: #dddd88;
    order: 2;
  }
  
  .container&gt;.left {
    width: 4px;
    background: black;
    order: 1;
  }
  
  .container&gt;.right {
    width: 4px;
    background: black;
    order: 3;
    display: flex;
  }
  
  .top,
  .bottom {
    display: block;
    height: 4px;
    background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='main'&gt;
    &lt;article&gt;
      &lt;header&gt;header&lt;/header&gt;
      &lt;section&gt;
        &lt;div class="top"&gt;&lt;/div&gt;
        &lt;div class="container"&gt;
          &lt;div class="field"&gt;
            Sub Container w/ borders
          &lt;/div&gt;
          &lt;div class="left"&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bottom"&gt;&lt;/div&gt;
      &lt;/section&gt;
    &lt;/article&gt;
    &lt;nav&gt;nav&lt;/nav&gt;
    &lt;aside&gt;aside&lt;/aside&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>