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。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: