时间戳

首页 > 解决方案 > Safari：最小高度 100% 在 flex-grow 孩子中不起作用

html - Safari：最小高度 100% 在 flex-grow 孩子中不起作用

问题描述

在 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

标签： htmlcsssafariflexbox

解决方案

这可以通过为 的每个父元素设置显式高度来解决.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 未填充 flex 父级的 100% 高度

推荐阅读