html - flexbox 父 div 在 ios 10 safari 中没有高度但在 ios 11 safari 中不是这样

Question

<div class="column">
<div class="trainer">
<span>
  hihi
</span>
</div>
</div>

.column {
  display:flex;
  flex-direction: column;
  background-color: red;
}

.trainer {
  display:flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  flex: 25%;
}

jsfiddle code sample

您可以试试上面的链接。 在 firefox 和 ios 11 safari 中，显示父 div 背景颜色， 而在 ios 10 safari 中，我看不到父 div 背景颜色。

那么如何解决 ios 10 safari 中父级高度为零的问题？

附言。我发现如果我将 25% 更改为 25px，红色背景会出现在 ios 10 safari 中。这是否意味着 ios 10 safari 不支持 flex-basis 百分比？

Answer 1

对于 Safari 6.1+，您可以使用 -webkit-flex-basis 属性。

.column {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: red;
}

.trainer {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-preferred-size: 25%;
  -webkit-flex-basis: 25%;
  flex-basis: 25%;
}

<div class="column">
  <div class="trainer">
    <span>hihi</span>
  </div>
</div>