Процентная высота в вложенной гибкой коробке

У меня есть довольно хороший настраиваемый интерфейс, работающий с flexbox, где пользователь может регулировать высоту и ширину панелей. Тем не менее, я хочу изменить высоты панелей, которые в настоящее время используют пиксели, чтобы использовать процент, поэтому, когда они меняют одну панель, другие панели текут.

Все работает отлично для ширины, но когда я использую высоту%, она ломается.

Вот скрипка, показывающая сломанный%.

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

Эта скрипка имеет 50% высоты, установленную на красный элемент, но она вообще не видна.

здесь 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;
}

И 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>

Я надеюсь, что есть небольшое изменение, которое я могу сделать, чтобы div был настроен на%.

Ответ 1