溢出属性在 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>

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

Overflow property not working in IE 11

html

css

flexbox

internet-explorer-11

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

Overflow property not working in IE 11

html

css

flexbox

internet-explorer-11

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