<分区>
<分区>
在 Chrome、Edge 和 FireFox 中，下面的代码生成(正确的)输出，其中最里面的 div 使用 min-height: 100% 填充它的父级。但是，在 Safari 中不会发生这种情况。我希望绿色 div 完全被它的子元素覆盖。
这是为什么呢？/我怎样才能获得正确的行为？
.container {
display: flex;
flex-direction: column;
height: 80vh;
}
.item1 {
flex-shrink: 0;
background: red;
}
.item2 {
flex-grow: 1;
background: green;
}
.inner {
background: blue;
min-height: 100%;
}<div class="container">
<div class="item1">Random text for size</div>
<div class="item2">
<div class="inner"></div>
</div>
</div>最佳答案
这可以通过为 .inner 的每个父元素设置明确的高度来解决。
<div class="container">
<div class="item1">Random text for size</div>
<div class="item2">
<div class="inner"></div>
</div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
height: 80vh;
}
.item1 {
flex-shrink: 0;
background: red;
}
.item2 {
flex-grow: 1;
height: 100%;
background: green;
}
.inner {
background: blue;
min-height: 100%;
}
</style>背景信息和更多可能的修复:Chrome / Safari not filling 100% height of flex parent
关于html - Safari:最小高度 100% 在 flex-grow 子项中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57562794/