iPhone 6 Flexbox Wrapping Issue

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>