iPhone 6 Flexbox Wrapping Issue
<p>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: ( <a href="https://jsfiddle.net/f8khw0dL/" rel="noreferrer">JSFiddle Fans</a> )</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="flex"&gt;
    &lt;div class="item one"&gt;&lt;/div&gt;
    &lt;div class="item two"&gt;&lt;/div&gt;
    &lt;div class="item three"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

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

<pre><code>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;
</code></pre>

<p>Is the only solution to <strong>not</strong> use flexbox if I want things to wrap correctly on iphones?</p>