在关于plunker(
https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview)的这个页面中,有一个奇怪的问题.
在Windows和Android上的Chrome上(Canary也是如此)一切正常.我可以滚动两个区域(左侧和右侧),页面的顶部和底部div位于设备屏幕的顶部和底部.我随时都能看到它们(见下图).
在iPad或iPhone,iOS,Safari或Chrome上,这不是我得到的.还有Windows上的Firefox 47.0.1.
页面很长,右边只有一个滚动,就像页面上没有弹性框一样,这个代码只是被忽略了：
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Quirk例子：
您只需点击此按钮即可在iPad或iPhone上看到：
为什么会这样？
Safari和Firefox的bug还是Chrome的？
为什么在Chrome上Windows和Android上的一切都很好？
如果在未来的新Safari中这将运行良好,如何处理旧iOS和Firefox的旧设备？
我会感激任何答案.谢谢.
解决方法
这既是令人沮丧又神秘的问题.
这些问题的问题来源通常是minimum sizing algorithm on flex items.这些规则是规范的一部分,可以防止弹性项目缩小超过其内容的大小.此类行为可防止滚动条呈现,因为内容无法溢出弹性项.它只是扩展它.
但是在这种情况下,没有一种标准方法可以覆盖该行为(例如,min-height：0,overflow：hidden).
以下两个建议可以让您更接近解决方案：
(1)由于您希望整个布局显示在视口中(即浏览器窗口上没有垂直滚动条),因此请勿使用min-height来确定容器的大小.这允许容器扩展.请改用固定高度.
对您的代码进行此调整：
.bigone {
display: flex;
/* min-height: 100vh; <-- REMOVE */
height: 100vh; /* <-- NEW */
flex-direction: column;
}
但是,这本身并不能解决问题.
(2)简单快速地解决问题的方法是在.col-6上设置一个高度.
.col-6 {
height: 90vh;
}
所以看起来Edge,FF和其他“非工作”浏览器需要在该容器上定义一个高度.
