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

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).