title: Flexbox Holy Grail Layout: Fixed Header, Fixed Left Nav, Fluid Content Area, Fixed Right Sidebar
body: <p>I'm attempting to build the "Holy Grail" layout using Flexbox.</p>
  
  <ul>
  <li>Fixed Header</li>
  <li>Fixed, Collapsible, Scrollable Left Nav</li>
  <li>Flexible Content Area</li>
  <li>Fixed, Collapsible, Scrollable Right Nav</li>
  </ul>
  
  <p><strong>See below:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/05U4M.png" rel="noreferrer"><img src="https://i.stack.imgur.com/05U4M.png" alt="enter image description here"></a></p>
  
  <p>I have everything working, except for the height of the "app" area underneath the header. Right now it's <strong>100vh</strong> (100% of the viewport height), but this includes the 64px header.</p>
  
  <p>I attempted calc(100vh - 64px), but that doesn't jive well with flex.</p>
  
  <p><strong>Here's my basic HTML structure:</strong></p>
  
  <pre><code>&lt;main&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;app&gt;
          &lt;nav&gt;Left Nav&lt;/nav&gt;
          &lt;article&gt;Content&lt;/article&gt;
          &lt;aside&gt;Right Nav&lt;/aside&gt;
      &lt;/app&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>And the supporting CSS:</strong></p>
  
  <pre><code>main {
      display: flex;
      flex-direction: column;
  }
  
  header { 
      z-index: 0;
      flex: 0 0 64px;
      display: flex;
  }
  
  app {
      flex: 1 1 100vh;
      display: flex;
  }
  
  nav {
      flex: 0 0 256px;
      order: 0;
  }
  
  article {
      flex: 1 1 100px;
      order: 1;
  }
  
  aside {
      flex: 0 0 256px;
      order: 2;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/JonMoore/LLfcL28u/19/" rel="noreferrer">- - - Full jsFiddle Here - - -</a></strong></p>
  
  <p><strong><a href="http://jsfiddle.net/JonMoore/mu748why/" rel="noreferrer">- - - Simplified jsFiddle Here - - -</a></strong></p>