title: percentage height in nested flex box
body: <p>I've got a pretty good adjustable interface working with flexbox where a user can adjust the height and width of panels. 
  However, I want to change the panel heights, which currently use pixels, to use percentage, so when they change one panel, the other panels flow. </p>
  
  <p>Everything works fine for widths, but when I use height % it breaks. </p>
  
  <p>Here's a fiddle showing the broken %. </p>
  
  <p><a href="http://jsfiddle.net/59trW/1/" rel="nofollow">http://jsfiddle.net/59trW/1/</a></p>
  
  <p>This fiddle has a 50% height set on the red element, but it isn't visible at all. </p>
  
  <p>here's the css</p>
  
  <pre><code>.outer-flex {
      position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right:0;
      display: flex;
      -webkit-box-align: stretch;
      flex-direction: row;
  }
  .left-panel {
      width: 30px;
      background-color: #5eddd8;
  }
  
  .flex {
      display: flex;
      flex:1;
      -webkit-box-align: stretch;
      flex-direction: column;
      background-color: #64b92a;
      min-height: 1px;
  }
  
  .fixed {
      height: 20px;
      background-color: #ecf0f1;
  }
  .top-box {
      height: 30%;
      background-color: red;
  }
  
  .bottom-box {
      flex: 1;
  }
  </code></pre>
  
  <p>And the html</p>
  
  <pre><code>    &lt;div class="outer-flex"&gt;
      &lt;div class="left-panel"&gt;
        this is ok.
      &lt;/div&gt;
     &lt;div class="flex"&gt;
         &lt;div class="fixed"&gt;doesn't move&lt;/div&gt;
        &lt;div class="top-box"&gt;top box&lt;/div&gt;
        &lt;div class="bottom-box"&gt;bottom box&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm hoping there is a small change I can make to have the div be adjustable by %. </p>