Flexbox children collapse in Safari

user_332528 0
Viewed 243

Flexbox children collapse in Safari but not in other browsers. Here is the minimal example (JSFiddle):

<html>
<body style="display: flex;height: 100vh;flex-flow: column;">
  <div style="display: flex;background: red;">
    <div style="padding: 1rem;">test</div>
  </div>
  <div style="height: 1000rem;"></div>
</body>
</html>

Here we have a div with red background wrapping another div with some padding. There is also another flex child that is very tall (1000rem).

In Chrome or Firefox the result looks normal. The red flex child wraps its own child properly:

Chrome

Now in Safari it looks completely wrong (tested on Version 14.0.2 (16610.3.7.1.9)) - the second tall child causes the first one to collapse:

Safari

The red child got collapsed despite having a child. It looks like the default min-height: auto that is applied by the browser is being ignored in Safari.

Is there a workaround to make Safari behave according to the spec?

flexbox safari css
1 Answers

Can you please check the below code link? Hope it will work for you. We have added flex-wrap:wrap; in body and added flex:1; in its last child so it will take full width.

Please refer to this link: https://jsfiddle.net/yudizsolutions/4oh5sb3a/1/

<body style="display: flex; display: -webkit-flex; height: 100vh;flex-flow: column; flex-wrap:wrap; -webkit-flex-wrap:wrap; ">
  <div style="display: flex;background: red; ">
    <div style="padding: 1rem;">test</div>
  </div>
  <div style="height: 1000rem; flex:1;"></div>
</body>

user_122138960
Related