title: Flexbox fill remaining height of 100%
body: <p>Why doesn't "Box 2" fill the full (available) space? The height:100% is ignored...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="box1"&gt;Box 1&lt;/div&gt;
      &lt;div id="box2"&gt;Box 2&lt;/div&gt;
      &lt;div id="box3"&gt;Box 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{margin:0 auto;}
  
  #container{width:100%;height:100%;background:#ccc;display:-webkit-flex;display:flex;flex-direction:column}
  
  #box1 {background:red;height:50px}
  #box2 {background:yellow;-webkit-flex:1;flex:1}
  #box3 {background:green;height:50px}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/618axkjy/2/" rel="nofollow">http://jsfiddle.net/618axkjy/2/</a></p>
  
  <p>Thanks!</p>