在每个 Chrome 和 IE11 中查看下面的代码示例。在 Chrome 中,<main>
背景停在 .container 元素的边缘,这是需要的。在 IE 中,它溢出到 .container 元素之外:
我在找什么:
我希望 IE 有
<main>
元素在 .container 元素的边缘结束对于 .container2,它显示正确:
<main>
元素应该只占据它需要的高度。
.container {
height:400px;
background:#333;
display:flex;
flex-direction:column;
width:40%;
position:absolute;
}
.container2 {
left:50%;
}
header {
color:white;
}
main {
background:#ccc;
width:30%;
display:flex;
flex-direction:column;
}
<div class="container">
<header>This is good in Chrome but bad in IE</header>
<main>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p><p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</main>
</div>
<div class="container container2">
<header>This is good in both browsers</header>
<main>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</main>
</div>
最佳答案
flex
在某些情况下限制 flex 子项的高度时有一些非常糟糕的行为(错误、缺陷、缺点或任何调用它的东西)。
使用 position: absolute
对我来说已经很多次了,设置在一个内部 div 上,就像这样。
在 Chrome、IE11、Edge、FF 中测试,一切正常。
.container {
height: 400px;
background: #333; display: flex;
flex-direction: column;
width: 40%; position: absolute;
}
.container2 { left:50%; }
header {
color:white;
}
main {
flex: 1;
width: 30%;
position: relative;
}
.inner {
position: absolute;
background:#ccc;
left: 0;
top: 0;
right: 0;
height: auto;
max-height: 100%;
}
<div class="container">
<header>This is good in Chrome but bad in IE</header>
<main>
<div class="inner">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</main>
</div>
<div class="container container2">
<header>This is good in both browsers</header>
<main>
<div class="inner">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</main>
</div>
关于html - 规范化 IE11 中的 Flexbox 溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35920485/