我有一个有顶部和底部的容器。我希望顶部是动态高度,但限制为父级高度的 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% 的高度,但底部占据了所有剩余的高度。
最佳答案
我想我明白了。不在顶部元素上指定 flex 允许它正常增长和收缩,并在底部保持 flex 设置使该元素使用所有高度。会删除问题,但这可能会在将来帮助人们。
.top {
max-height: 60%;
overflow-y:auto;
}
.bottom {
flex: 1 50%;
background-color: red;
}
关于html - css flexbox,带有约束的可变高度顶部和底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29051565/