溢出属性在IE 11中不起作用
溢出属性在IE 11中不起作用
提问于 2016-05-19 19:42:36
我下面的代码在大多数浏览器(Chrome，Firefox，Safari，Edge)中都运行得很好，但在IE11中似乎不起作用。
我正在阅读caniuse上的已知问题，但似乎没有提到任何关于IE11和overflow的内容。这是IE11中的一个bug，还是我遗漏了什么？
.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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-19 21:46:31
正如你所提到的，IE11在渲染flexbox时有很多问题。你还没有找到关于这个特定问题的文档，这可能意味着它还没有被记录下来。但它看起来确实是一个bug。
就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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37322163
复制相关文章
相似问题
腾讯云开发者
