Safari: Min-height 100% doesn't work inside a flex-grow child [duplicate]

Question

This question already has an answer here:

• Chrome / Safari not filling 100% height of flex parent 4 answers

In Chrome, Edge, and FireFox, the below code produces the (correct) output where the innermost div fills it's parent using min-height: 100% . However, in Safari this does not occur. I expect the green div to be completely covered by its children.

Why is that? / How can I obtain the correct behavior?

 .container { display: flex; flex-direction: column; height: 80vh; } .item1 { flex-shrink: 0; background: red; } .item2 { flex-grow: 1; background: green; } .inner { background: blue; min-height: 100%; } 

 <div class="container"> <div class="item1">Random text for size</div> <div class="item2"> <div class="inner"></div> </div> </div> 

StackBlitz

Answer 1

This can be fixed by setting an explicit height for every parent element of .inner .

 <div class="container"> <div class="item1">Random text for size</div> <div class="item2"> <div class="inner"></div> </div> </div> <style> .container { display: flex; flex-direction: column; height: 80vh; } .item1 { flex-shrink: 0; background: red; } .item2 { flex-grow: 1; height: 100%; background: green; } .inner { background: blue; min-height: 100%; } </style> 

Background info and more possible fixes: Chrome / Safari not filling 100% height of flex parent