flexbox 父 div 在 ios 10 safari 中没有高度，但在 ios 11 safari 中没有高度答案

【问题标题】：flexbox parent div have no height in ios 10 safari but not the case in ios 11 safariflexbox 父 div 在 ios 10 safari 中没有高度，但在 ios 11 safari 中没有高度
【发布时间】：2019-05-28 21:00:09
【问题描述】：

<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中父级高度为零的问题呢？

PS。我发现如果我把25%改成25px，在ios 10 safari中就会出现红色背景。这是否意味着ios 10 safari 不支持flex-basis 的百分比？

【问题讨论】：

标签： html ios css safari

【解决方案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>

【讨论】：