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

Question

我在另一个div中有2 div。两者都是flex，两者都有min-width。在Chrome和Firefox中，第二个包装是因为它的min-width强制它，但只要这两个内部div弯曲，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;
}

铬：

Safari中：

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;