css flexbox, переменная высота сверху и снизу с ограничениями

Question

У меня есть контейнер сверху и снизу. Я хочу, чтобы вершина была динамической, но ограничивалась 60% высоты родителя. Я хочу снизу, чтобы взять всю оставшуюся высоту, даже если она пуста.

Является ли css flex подходящим для этого?

Я пытался варианты вокруг этого

.container { 
    display: flex; 
    flex-direction: column; 
} 

.top { 
    flex: 1 1 50%; 
    overflow-y:auto; 
} 
.bottom { 
    flex: 1 1 50%; 
    background-color: red; 
} 

, но без особого успеха.

https://jsfiddle.net/2gvL2dk8/

Edit, с этой скрипкой

https://jsfiddle.net/2gvL2dk8/3/

вершина не растет на максимальную высоту 60%, а нижний принимают все оставшиеся высоты.

Answer 1

Думаю, что я понял. Не указывая flex на верхнем элементе, он позволяет ему расти и сжиматься в обычном режиме, а нижняя установка на нижней стороне делает этот элемент использующим всю высоту. Удалит вопрос, но это может помочь людям в будущем.

.top { 
    max-height: 60%; 
    overflow-y:auto; 
} 
.bottom { 
    flex: 1 50%; 
    background-color: red; 
}