percentage height in nested flex box

Question

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.

Everything works fine for widths, but when I use height % it breaks.

Here's a fiddle showing the broken %.

http://jsfiddle.net/59trW/1/

This fiddle has a 50% height set on the red element, but it isn't visible at all.

here's the css

.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;
}

And the html

    <div class="outer-flex">
    <div class="left-panel">
      this is ok.
    </div>
   <div class="flex">
       <div class="fixed">doesn't move</div>
      <div class="top-box">top box</div>
      <div class="bottom-box">bottom box</div>
    </div>
</div>

I'm hoping there is a small change I can make to have the div be adjustable by %.

Answer 1

You need to add a height to your right column:

http://jsfiddle.net/59trW/2/

.flex {
    display: flex;
    flex:1;
    flex-direction: column;
    background-color: #64b92a;
    height: 100%; /* here */
}

Also, -webkit-box-align: stretch is doing nothing for you because it comes from the old 2009 draft (which you aren't even using here), not the current spec (also, stretch is the default value for that property).