Safari flexbox: child of flex container with height:100% overflows when it has a grandchild with height:100%

Question

I have this code here and it behaves differently in Safari than in Chrome and Firefox, why?

 .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

I don't understand why the presence of grandchild2 makes child2 to have the same height as parent . Is this a known Safari bug?

If I remove grandchild2 , child2 doesn't overflow.

Is there a workaround to make Safari behave like Chrome and Firefox?

Answer 1

尝试从 child2 中删除高度并使用 flex-grow: 1

Answer 2

Making child2 a flex container seems to make bring the behaviour that I expect.

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

After reading this thread: Chrome / Safari not filling 100% height of flex parent

It seems that I have to use flex all the way through and not mix height: 100% and flex-grow:1 .