html - 溢出属性在 IE 11 中不起作用

Question

我的以下代码在大多数浏览器(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>

Answer 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>