Change the flex-direction value to column in Safari and the first flex-item covers the page

[Mori]

Sample:

body {
  margin: 0;
  height: 100vh;
  display: flex;
}

body:hover {
  flex-direction: column;
}

div {
  flex: 1;
}

div#tan {
  background: tan;
}

div#teal {
  background: teal;
}

<div id="tan"></div>
<div id="teal"></div>

DEMO

Hover your mouse over the page and here’s what you see in Safari 10, macOS Sierra:

And here’s how it’s supposed to look:

Why do other flex items disappear? What’s the solution?

[coothead]

Hi there Rain_Lover,

I cannot test on a “Mac”, as I don’t have one.

Have you tried adding this…

body:hover div {
  height:50vh;
  }

…to the CSS?

coothead

[Mori]

Have you tried adding this…

body:hover div {
height:50vh;
}

…to the CSS?

Now it looks all right, but what basically happens and causes this problem?

[coothead]

Now it looks all right, but what basically
happens and causes this problem?

From what I have read at “Sitepoint” it appears
that Safari" has problems rendering CSS in a
similar manner to “Chrome” or “Firefox”.

As a non “Mac/Safari” user, I had to assume
that Safari" must have a problem with “flex”,
hence my suggested solution.

Other members, will probably be able to give
in depth information about that browser.

coothead

[PaulOB]

Now it looks all right, but what basically happens and causes this problem?

Safari, historically (and still currently) has problems when the page needs a reflow and occasionally gets the result wrong. This usually occurs when you change something important on hover or dynamically change an elements’ display.

It’s just another bug that you have to work around:)