另一个 flex 元素内的 Flex 元素在 Safari 上折叠答案

【问题标题】：Flex element inside another flex element collapses on Safari另一个 flex 元素内的 Flex 元素在 Safari 上折叠
【发布时间】：2021-01-18 10:07:51
【问题描述】：

我在 Chrome 上运行了这段代码，其中第一个 flex-item 的内容需要与底部对齐并在必要时拉伸：

body {
  height:100vh;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.flex-container {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-item {
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  flex: 0 1 auto;
}

.flex-stretch {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
}

<div class="flex-container">
  <div class="flex-item flex-stretch">1</div>
  <div class="flex-item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
  <div class="flex-item">3</div>
</div>

但在 Safari 上，它不尊重第一个 flex-item 的内容，如果视口小于 flex-container 并且需要滚动，它就会折叠。

有没有办法解决这个问题？

谢谢，这是我的第一个问题:)

这里是codePen：https://codepen.io/felphos/pen/GRZVKwY

【问题讨论】：

您已在 flex-stretch 类样式中将 flex-shrink 设置为 1。试试flex: 1 0 auto 或给它一个min-height，它不应该缩在下面。
我无法设置最小高度，因为它取决于该 div 的内容，而且我还需要该 div 根据剩余空间缩小或增长。如果您运行代码 sn-p 并单击整页，您可以在 div 有增长空间时看到所需的行为，显然在 Chrome 中:)
我使用 JavaScript “解决”了它，其中我有一个 div 包含 .flex-stretch div 内部的内容，如果该 div 的高度 >= 到 .flex-stretch 的高度div 我将 .flex-stretch 的显示更改为块而不是 flex。现在还可以，但我很想通过 CSS 解决它。

标签： html css flexbox safari

【解决方案1】：

由于您使用 flexbox，您不应该明确定义高度。我认为删除 height: "100%" 并设置 .flex-stretch{flex: 1 0 auto;} (0 flex-shrink) 会得到你想要的。

【讨论】：

谢谢！这正是我需要的！