为什么 Safari 不换行 div？

Question

我在另一个 div 中有 2 个 div。两者都是弹性的，并且都有 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;
}

Chrome:

野生动物园：

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>

为什么 Safari 不换行 div？

Why does Safari not wrap second div?

css

safari

frontend

flexbox

web