html - Safari 中的 Flex 元素溢出容器

Question

出于某种原因， flex 元素不会留在 Safari 中的容器内。

这是 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

问题

您有一个容器，其高度:600px。

这个容器有两个 child :

• 一个 child 的高度:200px。
• 另一个 child 的高度:100%。

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

10.5 Content height: the height property

percentage

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block.

结果，发生了溢出:

(200px + 600px) > 600px

除了在 flex 容器中，初始设置是flex-shrink: 1 .这意味着 flex 元素可以收缩以适应容器。 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 让第二个 child 消耗剩余空间:

#div3 {
  flex: 1;
}

这意味着:任何未被其他 sibling 使用的空间都将被这个 child 使用。

#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>