flex-box中的行换行在Safari中不换行

Question

一个flex容器有四个子容器，每个子容器的flex基数为25%，最小宽度为a。flex-flow设置为行换行。Safari以外的其他浏览器会按照预期进行处理:如果达到了最小宽度，它会将下一项包装到下一行。在Safari中，它使容器溢出。

请在此处查看演示：http://codepen.io/lbilharz/pen/aJbkI

玉石

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

手写笔

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

有什么想法吗？

Answer 1

从comment on bugs.webkit.org上看，解决方案似乎很简单！

如果你的风格是

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

你只需要给你的flex声明增加更多的明确性。事实上，我认为只有一行需要像这样更改

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
} 

Answer 2

我在我的flex项上使用了max-width，所以我能够通过在flex属性中显式设置max-width来解决这个问题：

.wrapper {
  display: flex;
  flex-flow: row wrap;
}
li {
  width: 100%;
  max-width: 500px;
  flex: 1 1 500px;
}

Answer 3

这是一个Safari IOS错误。因此，修复/解决方法是将flex-basis设置为显式宽度，而不是子元素的auto。