title: "Holy Grail" three column layout using flexbox
body: <p>I'm trying to achieve the three-column layout generally described as the "holy grail" (see this <a href="http://alistapart.com/article/holygrail" rel="nofollow">ALA article</a>) using the new <code>display: flex</code> syntax.</p>
  
  <p>The requirements are as follows:</p>
  
  <ul>
  <li>A header and footer, with between them three columns</li>
  <li>The outer columns have fixed widths</li>
  <li>The inner column stretches to fill the space between the side columns, with a minimum and maximum width beyond which it will not stretch (so neither should the container)</li>
  <li>The footer should be at the bottom of the viewport, until the content actually pushes it below</li>
  </ul>
  
  <p>I got the first three requirements down with the following code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;header class="masthead"&gt;
      &lt;h1&gt;The Header&lt;/h1&gt;
    &lt;/header&gt;
    &lt;div class="side-left column"&gt;
      Left sidebar  
    &lt;/div&gt;
    &lt;div class="middle column"&gt;     
      Content goes here
    &lt;/div&gt;
    &lt;div class="side-right column"&gt;
      Right sidebar
    &lt;/div&gt;  
    &lt;footer class="footer"&gt;
      &amp;copy; Footer
    &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    display: flex;
    flex-flow: row wrap;
    min-width: 500px;
    max-width: 1100px;
  }
  .masthead {
    flex: 1 100%;
  }   
  .side-left,
  .side-right {
    flex: 0 0 150px;
  }
  .middle {
    flex: 1;
  }
  .footer {
    flex: 1 100%;
  }
  </code></pre>
  
  <p>Live in action: <a href="http://jsbin.com/derivanodilo/1/" rel="nofollow">jsBin</a></p>
  
  <p>However, I'm stuck with the 100% height. I already tried setting either some of the columns or the container to <code>height: 100%</code> or <code>min-height: 100%</code> but none seem to work. Do I need one of the many other flex properties to handle this? I can't seem to see the forest through the trees.</p>