在 IE11 中与显示重叠的行：flex

Posted 2023-03-05

【中文标题】在 IE11 中与显示重叠的行：flex

【英文标题】：Rows overlapping in IE11 with display: flex

【发布时间】：2017-02-02 19:57:10

【问题描述】：

我对 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>

【参考方案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>