Safari flex-grow行为与Chrome / FF / Edge（css flexbox）不同

Question

我使用flex-grow在Safari和Chrome / FF / Edge之间获得了不同的行为。我正试图获得一个垂直中心，但是safari正在提供更多的固定到底部效果。

我正在使用带有小数的flex-grow，但Safari似乎将其解释为整数值。

HTML

<div class="fc">
  <div>Align Top</div>
  <div>Align Center</div>
  <div>Align Bottom</div>
  <div class="spacer">Bottom Spacer</div>
</div>

CSS

.fc { 
  height: 100%;
  width: 100%;
  background-color: darkBlue;
  color: gold;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fc div {
  outline: 2px dashed gold;
  padding: 15px;
  width: 200px;
  text-align: center;
}

.fc div:first-child {
  outline: 1px dashed salmon;
  padding: 15px;
  flex-grow: .5;
  opacity: .5;
}

这是笔：https://codepen.io/dmgig/pen/NvMKJW

Safari 10上的问题行为（10.12）

其他浏览器上的所需行为

Answer 1

我在这里找到了一个错误报告：https://github.com/philipwalton/flexbugs/issues/182

它建议只使用元素的百分比高度并完全去除flex-grow，这确实可以很好地用于此目的。

.fc div:first-child {
  outline: 1px dashed salmon;
  padding: 15px;
  height: 25%;
  opacity: .5;
}

Answer 2

如果您将主体设为弹性容器，请将fc设置为flex-grow: 1（并移除height: 100%），它将根据需要进行渲染

Updated codepen

Stack snippet

＆＃13;

＆＃13;

html, body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 20px;
}
body {
  display: flex;
  flex-direction: column;
}

.fc { 
  flex-grow: 1;
  width: 100%;
  background-color: darkBlue;
  color: gold;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fc div {
  outline: 2px dashed gold;
  padding: 15px;
  width: 200px;
  text-align: center;
}

.fc div:first-child {
  outline: 1px dashed salmon;
  padding: 15px;
  flex-grow: .5;
  opacity: .5;
}

.fc div.spacer {
  outline: 1px dashed salmon;
  padding: 0;
  height: 60px;
  width: 200px;
  text-align: center;
  opacity: .5;
  padding: 15px;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 75px;
  width: 100%;
  background-color: salmon;
  color: darkBlue;
  opacity: .5;
  font-weight: bold;
}

＆＃13;

<div class="fc">
  <div>Align Top</div>
  <div>Align Center</div>
  <div>Align Bottom</div>
  <div class="spacer">Bottom Spacer</div>
</div>

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

＆＃13;

＆＃13;

＆＃13;

您还可以移除position: fixed上的footer并使其更具响应性

Updated codepen 2