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

回答

相关问题