Safari flexbox：當它有一個高度：100% 的孫子時，高度為 100% 的 flex 容器的子級溢出

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

鉻 79.0

火狐 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 。