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

【问题标题】：Why does Safari not wrap second div?为什么 Safari 不包装第二个 div？
【发布时间】：2015-10-30 01:42:39
【问题描述】：

我在另一个 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;
}

铬：

Safari：

【问题讨论】：

好像不行啊。
flex-basis 在 Chrome 上也不起作用。它使div 的大小相等且位于同一行。
请回答，以便我接受。

标签： css web safari frontend flexbox

【解决方案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>

【讨论】：