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?

@Michael_B by doing this, both `child2` and `grandchild2` have a height of `0px`, in Chrome and Safari. See https://jsfiddle.net/96pL5hky/1/ — jimousse, Dec 19 '19 at 12:01

score 0 · Answer 1 · answered Dec 18 '19 at 17:51

0

Try removing height from child2 and use instead flex-grow: 1

answered Dec 18 '19 at 17:51

Joseph

51
5

Still different from Chrome. With `.child2 { background: grey; flex-grow: 1}` like you suggested, the height of `grandchild2` is `0px` in Safari and `132px` in Chrome. – jimousse Dec 19 '19 at 11:56
I added `background: blue` to my snippet to make this more visible. What you suggested: https://jsfiddle.net/0aekrm5d/ – jimousse Dec 19 '19 at 12:02

jimousse · Accepted Answer · 2019-12-20T10:11:22.277

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.

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

2 Answers2