溢出属性在 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（仅作为示例）即可修复滚动条问题。

由于固定高度不是您想要的，您可以尝试仅针对 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>