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

我的代碼在大多數瀏覽器（Chrome，Firefox，Safari，Edge）中都能正常工作，但在IE11中似乎不起作用。溢出屬性在IE中不起作用11

我在閱讀關於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>

來源

2016-05-19 Cotten

正如你提到的，IE11有很多問題渲染Flexbox的。你沒有找到關於這個特定問題的文檔可能意味着它尚未被記錄。但它似乎是一個錯誤。

在overflow屬性的條款，除非一個的寬度或高度被聲明，IE11將適用overflow: visible，不管實際值，的。

在你的情況下，只需從flex-basis: auto切換到flex-basis: 75px（只是一個例子），修復了滾動條的問題。

由於固定高度不是你要找的，你可以試試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>

來源

2016-05-19 13:46:31

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

回答

相關問題