I love the flexibility that flexbox provides, but I've been facing an issue specifically with wrapping on iOS devices. Is there a simple fallback option for handling wrapping? Here's a problem scenario where items refuse to 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 basic approach I took. I also experimented with adding multiple prefixes to see if it would resolve the issue, but unfortunately, it didn't:
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;
Could it be that the only solution is to avoid using flexbox altogether if I want proper wrapping on iPhones?