使嵌套的CSS flexbox在Edge中垂直包装内容

时间:2019-03-06 12:19:59

标签: html css css3 flexbox microsoft-edge

我正在使用CSS flex来实现以下布局: -固定高度的容器中有两个“行” -第一排的高度固定,不会长大 -第二行占据了其余的可用高度(即,容器高度减去第一行高度),并且包含一长列物品,我需要填充这些物品的高度,然后开始沿X轴方向包装(可能会溢出)。

基本上,我想在视觉上实现以下功能: enter image description here

但是,无论我在Edge中尝试什么 ,我都会得到这个提示(内容不会自动包裹并拉伸高度): enter image description here 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>

0 个答案:

没有答案