时间戳

首页 > 解决方案 > 另一个 flex 元素内的 Flex 元素在 Safari 上折叠

html - 另一个 flex 元素内的 Flex 元素在 Safari 上折叠

问题描述

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

标签： htmlcssflexboxsafari

解决方案

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

推荐阅读