Problems with flex on Safari

[dnish]

Hey, I'm having the following structure:

<div id="main">
 <div id="content">
   <ScrollBars></Scrollbars>
</div>
</div>

#main uses display: flex;, while #content has the size of flex:1;. The content within ScrollBars isn't visible on Safari (the div has no height). I can only fix this if I set #content also to display:flex; and the ScrollBars element to flex:1;, while removing the standard width:100%; height:100%.

[mcraiganthony]

+1

@dnish thanks for the info ... have it working now.

[edi]

Just throwing my two cents in here.

Safari is known for it's issues with flex that has no vendor prefixes -webkit, therefore, if you didn't add the following, give it a try:

display: -webkit-flex;
display: flex;

As for the flex: 1 try:

-webkit-flex: 1;
flex: 1;
/* or use flex-grow */
-webkit-flex-grow: 1;
flex-grow: 1;

[piersolenski]

+1

[pablobarria]

Greetings,

I'm having the same issue. I'm using cssnext autoprefixer so all prefixes have been applied (I also double-checked they were being applied).

However, when replacing Scrollbars for a regular Div, my layout remains broken, it is just broken in a different way. So this is probably a larger flex on safari issue.

[amir0ff]

@dnish && @edi thank you for the solution :+1:

P.S. @malte-wessel can you please add this to the documentation as a Safari walk-around?