html - IE11 中的行重叠显示 : flex

Question

我在使用 IE11 时遇到问题:我希望 tabbar 占据它需要的高度，一行或多行。

表格应占据剩余高度并同时显示水平和垂直滚动条。

当宽度太窄并且按钮被包裹到第二行、第三行...时，就会出现问题。

还有其他方法可以在 IE11 中实现吗？

#container {
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  height: 100vh;
}

.tabbar {
  display: block;
  text-align: left;
  list-style-type: none;
}

.tabbar li {
  display: inline-block;
  background-color:#ddd;
  font-size:30px;
  padding:10px 20px;
  margin:5px;
}

table {
  display: block;
  flex: 1 1 auto;
  font-size: 16px;
  min-height: 100px;
  overflow: scroll;
  background-color:orange;
}

<div id="container">
  
<ul class="tabbar">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ul>
  
<table>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
  <tr>
    <td>row</td>
  </tr>
</table>
  
</div>

Answer 1

IE11 允许 ul.tabbar flex 元素缩小到其内容(列表元素)的大小以下。

列表项溢出 ul 并与下面的表格重叠。

要在 IE11 中看到这种效果，请将边框或 overflow: hidden 添加到 .tabbar。

其他浏览器不允许容器缩小到其内容的大小以下。

要修复它，请将其添加到您的代码中:

.tabbar { flex-shrink: 0; }

#container {
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  height: 100vh;
}
.tabbar {
  display: block;
  text-align: left;
  list-style-type: none;
  flex-shrink: 0;
  border: 1px dashed red;
}
.tabbar li {
  display: inline-block;
  background-color: #ddd;
  font-size: 30px;
  padding: 10px 20px;
  margin: 5px;
}
table {
  display: block;
  flex: 1 1 auto;
  font-size: 16px;
  min-height: 100px;
  overflow: scroll;
  background-color: orange;
}

<div id="container">
  <ul class="tabbar">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
  </ul>
  <table>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>
    <tr><td>row</td></tr>    
  </table>
</div>