IE11 中的行与显示重叠：flex

Question

我的 IE11 有问题：我希望 tabbar 占据它需要的高度，一行或多行。

table应该占据剩余的高度，同时显示水平和垂直滚动条。

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

是否有其他方法可以在 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 弹性项目缩小到其内容（列表项目）的大小以下。

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

要在 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>

IE11 中的行与显示重叠：flex

Rows overlapping in IE11 with display: flex

html

css

flexbox

internet-explorer-11