如何修复 Safari 中的 flex 50% 布局问题？

Question

我有一个 flex 布局的小例子，我对 Safari 有一些问题（版本 10.1.2 (12603.3.8)）

所以有一个内容，里面有四个盒子，布局是2x2。在底部有一个页脚部分。 我想将框放在内容 div 内，以将其高度填充 50% 的高度和宽度。但在 Safari 中，它似乎忽略了页脚部分，并将框放置到与整个页面对齐。

所以这就是我想要实现的目标，它可以在 chrome 中运行：

这就是它在 Safari 中的样子：

我设法在 High Sierra 中尝试了它，那里有更新的 Safari（版本 11）并且它可以工作。所以它一定是一个错误，但我们可以在 Safari 10 中处理这个问题吗？谢谢！

这是我的代码

HTML：

* {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background: white;
  border: 1px solid tomato;
}

.box {
  width: 50%;
  height: 50%;
  background: skyblue;
  border: 1px solid black;
}

.footer {
  opacity: 0.7;
  flex: 0 0 auto;
  height: 100px;
  background: plum;
}

<div class="wrapper">
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>    
  </div>
  <div class="footer"></div>
</div>

Answer 1

由于content 是一个弹性列项，您不使用height 使其填充其父项，因此您使用flex-grow。

删除content上的高度并添加flex-grow: 1

.content {
  flex-grow: 1;                    /*  added  */
  display: flex;
  flex-wrap: wrap;
  background: white;
  border: 1px solid tomato;
}

也不需要width: 100%，默认情况下会这样做

堆栈sn-p

* {
  box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  background: white;
  border: 1px solid tomato;
}

.box {
  width: 50%;
  background: skyblue;
  border: 1px solid black;
}

.footer {
  opacity: 0.7;
  flex: 0 0 auto;
  height: 100px;
  background: plum;
}

<div class="wrapper">

  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>    
  </div>

  <div class="footer"></div>

</div>