如何在Safari中修复flex 50％布局问题？

Question

我有一个很小的flex布局示例，我在使用Safari时遇到了一些问题（版本10.1.2（12603.3.8））

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

所以这就是我想要实现的目标，它适用于chrome：

这就是Safari中的样子：

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

这是我的代码

HTML：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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%，默认情况下会这样做

Stack snippet

* {
  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>