Safari中的Flex项目溢出容器

Question

出于某种原因，在 Safari 中，flex 项目不会留在容器内。

以下是 Chrome 和 Firefox 中的布局：

这是它在 Safari 中的样子：

这是我的代码：

#div1 {
  background: black;
  width: 250px;
  height: 600px;
  display: flex;
  flex-direction: column;
  padding-bottom: 5px
}

#div2 {
  background: pink;
  color: #FFF;
  width: 240px;
  height: 200px
}

#div3 {
  background: blue;
  color: #FFF;
  width: 240px;
  height: 100%;
  position: relative
}

<div id="div1">
  <div id="div2">test</div>
  <div id="div3">test2</div>
</div>

Answer 1

问题

您有一个带有height: 600px 的容器。

这个容器有两个孩子：

• 一个孩子有height: 200px。
• 另一个孩子有height: 100%。

由于百分比高度基于父项的高度，因此您将第二个子项的高度设置为等于容器的全高。

10.5 Content height: the height property

百分比

指定百分比高度。百分比是相对于生成框的包含块的高度计算的。

结果发生溢出：

(200px + 600px) > 600px

除了在弹性容器中，初始设置是flex-shrink: 1。这意味着弹性项目可以缩小以适应容器。 Chrome 和 Firefox 正确应用此设置，允许带有 height: 100% 的元素缩小以适应。显然，Safari 有不同的解释。

---

解决方案

你可以使用calc()来解决这个问题：

#div3 {
  height: calc(100% - 200px);
}

#div1 {
  background: black;
  width: 250px;
  height: 600px;
  display: flex;
  flex-direction: column;
  padding-bottom: 5px
}

#div2 {
  background: pink;
  color: #FFF;
  width: 240px;
  height: 200px
}

#div3 {
  background: blue;
  color: #FFF;
  width: 240px;
  height: calc(100% - 200px);
}

<div id="div1">
  <div id="div2">test</div>
  <div id="div3">test2</div>
</div>

但是，由于您已经在列方向 flex 容器中工作，您可以使用 flex 让第二个孩子占用剩余空间：

#div3 {
  flex: 1;
}

这意味着：其他兄弟姐妹没有用完的任何空间都将被这个孩子消耗。

#div1 {
  background: black;
  width: 250px;
  height: 600px;
  display: flex;
  flex-direction: column;
  padding-bottom: 5px
}

#div2 {
  background: pink;
  color: #FFF;
  width: 240px;
  height: 200px
}

#div3 {
  background: blue;
  color: #FFF;
  width: 240px;
  flex: 1;
}

<div id="div1">
  <div id="div2">test</div>
  <div id="div3">test2</div>
</div>