当与最新的Boostrap 4 Beta一起使用时，我在iOS版本9上遇到此错误。基本上，我有一个父div和一个包含多个列表项的ul元素。父div是一个flexbox，其尺寸设置为一些数字，并为children元素打开溢出。该列表项应该占据父项高度的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。
那么，关于如何在不从根本上改变语法和影响其他浏览器的情况下解决此问题的任何想法？
默认情况下，弹性项目允许收缩，flex-shrink: 1这似乎也是iOS9允许的。
通过给予li flex-shrink: 0应避免。
堆栈片段
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句