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

如果您将 body 设为 flex 容器，请将 fc 设置为 flex-grow: 1(并移除 height: 100%)它会按照你的意愿呈现

Updated codepen

堆栈片段

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

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

---

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

Updated codepen 2