iPhone 6 Flexbox Wrapping Issue

Question

I enjoy using flexbox but for some reason I cannot get wrapping to work on any iOS device. Is there an easy fallback for wrapping? Here's an issue where items just won't wrap: ( JSFiddle Fans )

#flex            {display: flex; flex-flow: row wrap;}
#flex .item      {width:33.33%; min-width: 500px; min-height: 300px;}
#flex .one       {background: blue;}
#flex .two       {background: green;}
#flex .three     {background: red;}

<div id="flex">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>

That's the simplest approach. I then tried to add a ton of prefixes to everything to see if that helped but it did not:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
-webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;

Is the only solution to not use flexbox if I want things to wrap correctly on iphones?

Solution 1

The core of the issue was persistent in iPhone 5 and 6 through all browsers. In the end it had to do with setting a percentage width. Once I removed that everything stacked as it should. I wanna thank /u/andrei-gheorghiu as his JSFiddles ( in a deleted answer ) pointed me in the right direction.

#flex            {
        display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; 
-webkit-box-orient: horizontal; 
-webkit-box-direction: normal; 
-webkit-flex-direction: row; 
    -ms-flex-direction: row; 
        flex-direction: row;
-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
#flex .item      {min-width: 200px; min-height: 300px;}
#flex .one       {background: blue;}
#flex .two       {background: green;}
#flex .three     {background: red;}

<div id="flex">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
</div>

Solution 2

iPhone 6s not support flex-direction tag. I solved the problem by replacing it with flex-wrap.

Old: flex-direction: column-reverse

New: flex-wrap: wrap-reverse

It's work!)

Comments

[user500665]

Would using width: calc(100% / 3); work instead of a straight percentage?

[Howdy_McGee]

@user500665 I haven't tested it but I can't think of a reason why it wouldn't work except maybe browser support.

[Cozzbie]

The issue was on iOS safari not desktop safari. This doesn't solve the said flex problem.

[Chaoste]

This did solve the problem for me on an iPhone 5 with Safari