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

Question

我正在使用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>