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

问题描述

我的代码在大多数浏览器（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 = > < div class =header>无特定高度的标题。始终停留在.container顶部，即使它很长，它占用了两行。< / div> < div class =content> < 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> < / div>< / div>  
 

解决方案

正如你所说，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; / * adjust * / overflow：auto;}  

  div class =container> < div class =header>无特定高度的标题。始终停留在.container顶部，即使它很长，它占用了两行。< / div> < div class =content> < 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> < / div>< / 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屋！