css - 当父容器设置为特定高度时，Flexbox 元素在 iOS 9 上缩小

Question

我在 iOS 版本 9 上使用最新的 Boostrap 4 Beta 时遇到了这个错误。基本上我有一个父 div 和一个包含多个列表项的 ul 元素。父 div 是一个 flexbox，尺寸设置为一些数字，并为子元素打开溢出。列表项应该占据父级高度的 100%。这是演示代码的链接:https://codepen.io/nguyenthai/pen/jawzRo .

大多数浏览器都可以正常显示。但是，仅在任何版本的 iOS 9 上，列表都会缩小，因为 Safari 不会计算容器的正确高度。我相信此错误存在多种变体，其中大部分已从 iOS 10 及更高版本中修复。但我确实需要对 iOS 9 的支持，到目前为止，我发现的所有解决方法都无法正常工作。设置 flex-shrink: 0; 或使用 flex: 1 0 auto; 没有产生成功结果。唯一能以某种方式缓解这种情况的方法是将列表切换为使用 display: block 而不是 flex。但是，这也可能对其他浏览器产生影响，我只希望修复专门适用于任何 iOS 版本 9。

关于如何在不彻底改变语法和影响其他浏览器的情况下解决这个问题有什么想法吗？

Answer 1

默认情况下允许收缩 flex 元素，flex-shrink: 1，看来这也是 iOS9 允许的。

通过给 li flex-shrink: 0 应该可以防止这种情况发生。

Updated codepen

堆栈片段

.test {
  width: 400px;
  height: 500px;
  overflow: auto;
}
.list-group-item {
  flex-shrink: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="test d-flex flex-column">
  <ul class="list-group h-100">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
<div>