html - 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/

编辑，用这个 fiddle

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

顶部没有增长到最大 60% 的高度，但底部占据了所有剩余的高度。

Answer 1

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

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