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