Flexbox плохо работает с максимальной высотой ⇐ CSS

[Anonymous]

Мою проблему, вероятно, лучше всего объяснить на примере. Следующий jsfiddle будет работать в Chrome:
http://jsfiddle.net/ga6g4/

Код: Выделить всё

.lhs {
position: absolute;
top: 8px;
left: 8px;
width: 250px;
height: 100px;
border: 1px solid red;

display: flex;
flex-direction: column;
}

.panel-container {
flex: 1;
overflow: auto;
}

Код: Выделить всё

Header

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[*]Item 4
[*]Item 5
[/list]

Как видите, у меня есть флексбокс фиксированной высоты с фиксированный заголовок и прокручиваемое тело. Все идет нормально. Однако, если вы измените CSS-код «height» контейнера «.lhs» на max-height:

Код: Выделить всё

max-height: 100px;

Код: Выделить всё

.lhs {
position: absolute;
top: 8px;
left: 8px;
width: 250px;
max-height: 100px;
border: 1px solid red;

display: flex;
flex-direction: column;
}

.panel-container {
flex: 1;
overflow: auto;
}

Код: Выделить всё

Header

[list]
[*]Item 1
[*]Item 2
[*]Item 3
[*]Item 4
[*]Item 5
[/list]

http://jsfiddle.net/ga6g4/1/
Он ломается. Кажется, теперь я думаю, что мой список теперь имеет нулевую высоту! Есть идеи, почему это делает то, что делает, и как я могу это исправить?
РЕДАКТИРОВАТЬ: В своем исходном сообщении я недостаточно подробно описал, как я хочу, чтобы это вело себя. По сути, внешний должен использовать только минимальную необходимую высоту, но только до максимальной (определяемой max-height). На этом этапе я хочу, чтобы контент начал прокручиваться.

Подробнее здесь: https://stackoverflow.com/questions/229 ... max-height