When testing my code in Chrome, Edge, and FireFox, I noticed that the innermost div fills its parent correctly using min-height: 100%. However, Safari does not display the same behavior. The green div is not completely covered by its children as expected.
What could be causing this discrepancy? How can I adjust the code to achieve the desired outcome in all browsers?
.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>