Safari：最小高度 100% 在 flex-grow 孩子中不起作用 [重复]答案

【问题标题】：Safari: Min-height 100% doesn't work inside a flex-grow child [duplicate]Safari：最小高度 100% 在 flex-grow 孩子中不起作用 [重复]
【发布时间】：2019-12-25 00:44:17
【问题描述】：

在 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

【问题讨论】：

将 display:flex 添加到 item2 中，你会得到这个（你也可以摆脱 min-height）.. 不知道为什么它在 Safari 上不起作用。顺便说一句，为什么它可以在其他浏览器上运行也不是微不足道的
它在 Safari 中不起作用，因为 Safari 仍然需要父级上的显式高度才能在子级上工作的百分比高度。其他主要浏览器也在不断发展，也接受 flex 高度作为参考。

标签： html css safari flexbox

【解决方案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 中导致了不同的问题。这适用于其他浏览器，因为它使用默认样式 flex-shrink: 1 - 但它不会在 Safari 中缩小，因此 item2 会溢出容器