css – 在Safari,Firefox和Edge VS Chrome上使用(overflow-y)滚动的flexbox的不同行为

在关于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和其他“非工作”浏览器需要在该容器上定义一个高度.

revised demo