css - 为什么 Safari 不包装第二个 div？

Question

我在另一个 div 中有 2 个 div。两者都是 flex 并且都有 min-width。在 Chrome 和 Firefox 中，第二个包裹是因为它的 min-width 强制它，但只要这两个内部 div 是 flex 的，Safari 就不会扭曲它。

这是一个 example :

HTML

<div class="a">
    <div class="b"></div><div class="c"></div>
</div>

CSS

div {
    height: 100px;
}
.a {
    width: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.b {
    min-width: 400px;
    background: red;
    flex: 1;
}
.c {
    min-width: 400px;
    background: yellow;
    flex: 1;
}

Chrome :

Safari :

Answer 1

而不是 min-width 使用 flex-basis(当然有合适的供应商前缀)。

div {
  height: 100px;
}
.a {
  width: 500px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.b {
  flex: 1 0 400px;
  background: red;
}
.c {
  background: yellow;
  flex: 1 0 400px;
}

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>