Question

我这里有这段代码，它在Safari中的行为不同于在Chrome和Firefox中的行为，为什么？

.parent {
  height: 150px;
  display: flex;
  flex-direction: column;
  background: salmon;
  border: 2px solid black;
}

.child1 {
  background: red;
}

.child2 {
  background: grey;
  height: 100%;
}

.grandchild2 {
  height: 100%;
  background: blue;
}

<div class="parent">
  <div class="child1">
    child 1
  </div>
  <div class="child2">
    <div class="grandchild2">
    </div>
  </div>
</div>

Safari 12.1.1

Chrome 79.0

Firefox 70.0.1

我不明白为什么grandchild2的存在会使child2具有与parent相同的高度。这是已知的Safari错误吗？

如果我移除grandchild2，则child2不会溢出。

是否存在一种使Safari像Chrome和Firefox一样运作的解决方法？

Answer 1

尝试从child2移除高度，然后改用flex-grow：1

Answer 2

使用child2的flex容器似乎可以带来我期望的行为。

.parent {
  height: 150px;
  display: flex;
  flex-direction: column;
  background: salmon;
  border: 2px solid black;
}

.child1 {
  background: red;
}

.child2 {
  background: grey;
  flex-grow: 1; /* <---- added that */
  display: flex; /* <---- added that */
  flex-direction: column; /* <---- added that */
}

.grandchild2 {
  flex-grow: 1; /* <---- added that */
  background: blue;
}

<div class="parent">
  <div class="child1">
    child 1
  </div>
  <div class="child2">
    <div class="grandchild2">
    </div>
  </div>
</div>

阅读此线程后：Chrome / Safari not filling 100% height of flex parent

似乎我必须一直使用flex，而不能混用height: 100%和flex-grow:1。

Safari flexbox：高度为100％的flex容器的子代在高度为100％的孙子时溢出

2 个答案: