Flexbox行换行无法在Safari

Question

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

这是我的HTML：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Here是一个小提琴的例子

Answer 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>