我正在使用CSS flex来实现以下布局: -固定高度的容器中有两个“行” -第一排的高度固定,不会长大 -第二行占据了其余的可用高度(即,容器高度减去第一行高度),并且包含一长列物品,我需要填充这些物品的高度,然后开始沿X轴方向包装(可能会溢出)。
但是,无论我在Edge中尝试什么 ,我都会得到这个提示(内容不会自动包裹并拉伸高度): Chrome可以正常工作并且可以正确包装。
是否可以做一些事情而无需将高度设置为第二行?我的理解是,该行将占据剩余的高度,但不会超过该高度,但是似乎Edge不喜欢它。
.container {
display: flex;
flex-flow: column nowrap;
height: 100px;
border: 2px black dotted;
}
.row-1 {
border: 1px red solid;
height: 3em;
flex: 0 0 auto;
}
.row-2 {
border: 1px green solid;
flex: 0 1 auto;
display: flex;
}
.list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: column wrap;
}
<div class="container">
<div class="row-1">
Menu here
</div>
<div class="row-2">
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>