iPhone 6 Flexbox Wrapping问题

Question

我喜欢使用flexbox,但出于某种原因,我无法在任何iOS设备上进行包装.包装容易后退吗？这是一个物品不会换行的问题:(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>

这是最简单的方法.然后我尝试在所有内容中添加大量前缀,看看是否有帮助,但事实并非如此:

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;

如果我想在iphone上正确包装东西,唯一的解决方案是不使用flexbox吗？

Answer 1

该问题的核心在iPhone 5和6中通过所有浏览器持久存在.最后,它与设置百分比宽度有关.一旦我删除了所有应该堆叠的东西.我想感谢/ u/andrei-gheorghiu,因为他的JSFiddles(在一个删除的答案中)指出了我正确的方向.

#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>