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