溢出属性在 IE 11 中不起作用 [英] Overflow property not working in IE 11

问题描述

我下面的代码在大多数浏览器(Chrome、Firefox、Safari、Edge)中都可以正常工作，但在 IE11 中似乎不起作用.

我正在 caniuse 上阅读已知问题，但它似乎什么也没说关于 IE11 和 overflow.这是 IE 11 中的错误还是我遗漏了什么?

.container {显示:弹性；最大高度:100px；弹性方向:列；边框:1px纯红色；}.header {背景:#eee;}.container >div {弹性:0 0 自动；}.container >div.content {弹性:0 1 自动；溢出:自动；}

 没有特定高度的标题.总是停留在 .container 的顶部，即使它很长它用完两行.</div><div class="内容"><div>长列表中的第 1 项</div><div>长列表中的第 2 项</div><div>长列表中的第 3 项</div><div>长列表中的第 4 项</div><div>长列表中的第 5 项</div><div>长列表中的第 6 项</div><div>长列表中的第 7 项</div><div>长列表中的第 8 项</div><div>长列表中的第 9 项</div><div>长列表中的第 10 项</div><div>长列表中的第 11 项</div><div>长列表中的第 12 项</div>

解决方案

正如您所指出的，IE11 在呈现 flexbox 时存在许多问题.您尚未找到有关此特定问题的文档这一事实可能仅意味着尚未对其进行记录.但它似乎确实是一个错误.

对于overflow属性，IE11会应用overflow:visible，不管实际值是多少，除非声明了宽度或高度.

在您的情况下，只需从 flex-basis: auto 切换到 flex-basis: 75px(仅作为示例)，即可修复滚动条问题.

由于固定高度不是您想要的，您可以尝试 仅适用于 IE11 的定位样式.

.container {显示:弹性；最大高度:100px；弹性方向:列；边框:1px纯红色；}.header {背景:#eee;}.container >div {弹性:0 0 自动；}.container >div.content {弹性:0 1 75px；/* 调整 */溢出:自动；}

 没有特定高度的标题.始终停留在 .container 的顶部，即使它很长，它也会用完两行.</div><div class="内容"><div>长列表中的第 1 项</div><div>长列表中的第 2 项</div><div>长列表中的第 3 项</div><div>长列表中的第 4 项</div><div>长列表中的第 5 项</div><div>长列表中的第 6 项</div><div>长列表中的第 7 项</div><div>长列表中的第 8 项</div><div>长列表中的第 9 项</div><div>长列表中的第 10 项</div><div>长列表中的第 11 项</div><div>长列表中的第 12 项</div>

My code below works fine in most browsers (Chrome, Firefox, Safari, Edge) but does not seem to work in IE11.

I'm reading about the Known Issues at caniuse but it doesn't seem to say anything about IE11 and overflow. Is this a bug in IE 11 or am I missing something?

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

解决方案

As you noted, IE11 has many problems rendering flexbox. The fact that you haven't found documentation about this particular issue could just mean it hasn't been documented yet. But it does appear to be a bug.

In terms of the overflow property, IE11 will apply overflow: visible, regardless of the actual value, unless a width or height is declared.

In your case, simply switching from flex-basis: auto to flex-basis: 75px (just an example), fixes the scrollbar issue.

As a fixed height is not what you're looking for, you could try 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 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！