Flexbox 换行在 Safari 中不起作用答案

【问题标题】：Flexbox row wrap not working in SafariFlexbox 换行在 Safari 中不起作用
【发布时间】：2017-09-30 08:35:21
【问题描述】：

使用 OSX 10.12.4 Safari 版本 10.1 和 flex row wrap 无法按预期工作。我在这里看到了其他关于 row wrap 不在 safari 中工作的问题，但到目前为止它对我没有帮助。

这是我的html：

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.header {
  flex: 1 100%;
  -webkit-flex: 1 100%;
  -moz-flex: 1 100%;
}

.body {
  flex: 1;
  -webkit-flex: 1;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="body">
    body
  </div>
</div>

Here 是一个小提琴的例子

【问题讨论】：

使用<p>标签？
@SankarshMakam 在这种情况下，我在 div 中只有文本，但在许多用例中还有其他内容，例如彩色背景和多个输入，我习惯于将 div 用作这些的容器.

标签： html css safari flexbox

【解决方案1】：

在.body 中执行与在.header 中相同的操作。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  -webkit-flex: 1 100%; /* safari fix */
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="body">
    body
  </div>
</div>

【讨论】：

谢谢。这是什么原因？在 Safari 中，我是否必须指定要换行到下一行的宽度？
在使用 flex-grow:1 时设置 flex-basis（至少对我来说是这样），这只是 safari 包装的修复。