0

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vlad274
  • 6,514
  • 2
  • 32
  • 44
  • add `display:flex` to item2 and you will get this (you can also get rid of min-height) .. don't know why it's not woking on Safari. By the way, the *why* it works on the other browser is also not trivial – Temani Afif Aug 19 '19 at 19:28
  • 2
    It doesn't work in Safari because Safari still requires an explicit height on the parent for a percentage height to work on the child. Other major browsers have evolved, accepting flex heights as a reference, as well. – Michael Benjamin Aug 19 '19 at 19:57

1 Answers1

0

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

MaartenDev
  • 5,631
  • 5
  • 21
  • 33
  • This actually causes a different problem in Safari. This works in other browsers because it uses the default style `flex-shrink: 1` - but it doesn't shrink in Safari, so `item2` overflows the container – Vlad274 Aug 19 '19 at 20:00