溢出属性在 IE 11 中不起作用答案

【问题标题】：Overflow property not working in IE 11溢出属性在 IE 11 中不起作用
【发布时间】：2016-09-16 06:30:39
【问题描述】：

我下面的代码在大多数浏览器（Chrome、Firefox、Safari、Edge）中运行良好，但在 IE11 中似乎无法运行。

我正在阅读caniuse 上的已知问题，但它似乎没有说明 IE11 和 overflow。这是 IE 11 中的错误还是我遗漏了什么？

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}
.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 auto;
  overflow: auto;
}

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container, even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>

【问题讨论】：

标签： html css flexbox internet-explorer-11

【解决方案1】：

正如您所指出的，IE11 在渲染 flexbox 时存在许多问题。您尚未找到有关此特定问题的文档这一事实可能只是意味着它尚未记录在案。但这似乎是一个错误。

就overflow 属性而言，IE11 将应用overflow: visible，而不管实际值如何，除非声明了宽度或高度。

在您的情况下，只需从 flex-basis: auto 切换到 flex-basis: 75px（只是一个示例），即可解决滚动条问题。

由于固定高度不是您想要的，您可以尝试targeting styles for just IE11。

.container {
  display: flex;
  max-height: 100px;
  flex-direction: column;
  border: 1px solid red;
}
.header {
  background: #eee;
}
.container > div {
  flex: 0 0 auto;
}
.container > div.content {
  flex: 0 1 75px;             /* adjusted */
  overflow: auto;
}

<div class="container">
  <div class="header">Header without specific height. Always stays at top of .container,
                      even if it is so long it uses up two lines.</div>
  <div class="content">
    <div>Item no 1 in long list</div>
    <div>Item no 2 in long list</div>
    <div>Item no 3 in long list</div>
    <div>Item no 4 in long list</div>
    <div>Item no 5 in long list</div>
    <div>Item no 6 in long list</div>
    <div>Item no 7 in long list</div>
    <div>Item no 8 in long list</div>
    <div>Item no 9 in long list</div>
    <div>Item no 10 in long list</div>
    <div>Item no 11 in long list</div>
    <div>Item no 12 in long list</div>
  </div>
</div>

【讨论】：