Html css flexbox，顶部和底部高度可变，带约束

我有一个有顶部和底部的容器。我希望顶部是动态高度，但约束为父级高度的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;
}

但没有多大成功

编辑，用这把小提琴

---

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

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

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