当父容器设置为特定高度时，Flexbox 项目在 iOS 9 上缩小

Question

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

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

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

Answer 1

弹性项目默认允许收缩，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>

当父容器设置为特定高度时，Flexbox 项目在 iOS 9 上缩小

Flexbox item is shrunk down on iOS 9 when the parent container is set as a specific height

css

flexbox

twitter-bootstrap-4

ios9