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

Question

在关于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的旧设备？

我会感激任何答案.谢谢.

Answer 1

这既是令人沮丧又神秘的问题.

这些问题中的问题来源通常是弹性项目的最小尺寸算法.这些规则是规范的一部分,可防止弹性项目缩小超过其内容的大小.此类行为可防止滚动条呈现,因为内容无法溢出弹性项.它只是扩展它.

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

修订演示