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/

用这个小提琴编辑

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

顶部没有增长到最高60％的高度，但是底部正在保持所有剩余的高度。

Answer 1

我想我明白了。不在顶部元素上指定flex允许它正常生长和收缩，并且在底部保持flex设置使该元素使用所有高度。会删除这个问题，但这可能会对将来的人有所帮助。

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