Question

在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>

StackBlitz

Answer 1

可以通过为.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

Safari：最小身高100％的儿童无法正常成长

1 个答案: