代码之家 › 专栏 › 技术社区 › Spincel

当父容器设置为特定高度时,iOS 9上的Flexbox项会缩小

twitter-bootstrap-4 ios9 flexbox css

Spincel · 技术社区 · 7 年前

我在使用最新的Boostrap 4测试版时,在iOS版本9上遇到了这个错误。基本上,我有一个父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 而不是弹性。然而,这也可能对其他浏览器产生影响,我只希望修复程序专门适用于任何iOS版本9。

1 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

默认情况下,允许收缩弹性项, 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>

推荐文章

Anton Tropashko · 如何获得符合可访问性设置的单空格字体

7 年前

Niko · MediaPlaybackRequireservation已弃用,iOS 9

7 年前

pajevic · 在UITextView中点击NSLinkAttributeName链接在iOS 9中不起作用

7 年前

rswayz · iOS10中的多点连接错误“发送绑定请求失败”

8 年前

Vahid Najafi · ionic ios9错误:[ng:areq]参数TabCtrl不是函数,未定义

8 年前

Maciek · iOS 9和10是否可以使用核心数据(Xcode 8和Swift 3.0)?

8 年前

Tejinder · 通用链接在IOS中是如何工作的?

9 年前

Jigar Tarsariya · 滚动表视图时在特定滚动点调用api

9 年前

Konstantinos Natsios · Alamofire json swift 2.2版

9 年前

Kiryl BielaÅ¡eÅski Mkey · SFSafariViewController无法在移动模式下打开url

9 年前