css - 在Safari，Firefox和Edge VS Chrome上具有(overflow-y)滚动的flexbox的不同行为

在此页面上关于plunker(https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview)的问题很奇怪。

在Windows和Android(也为Canary)上的Chrome上，一切正常。我可以滚动两个区域(在左侧和右侧)，页面的顶部和底部div分别位于设备屏幕的顶部和底部。我随时都可以看到它们(请参见下图)。



在iPad或iPhone，iOS，Safari或Chrome上，这不是我得到的。以及Windows上的Firefox 47.0.1。

该页面很长，右侧只有一个滚动条，例如如果页面上没有flexbox，则将忽略此代码:

.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;
}

怪癖示例:



您可以通过单击以下按钮在iPad或iPhone上看到:



为什么会有这种行为？
Safari和Firefox的错误还是Chrome的错误？
为什么在Chrome上Windows和Android上的一切都很好？
而且，如果将来在新的Safari中可以正常工作，那么如何在使用旧版iOS和Firefox的旧版设备上进行操作？

我将不胜感激。谢谢。

最佳答案

这既是一个令人沮丧又神秘的问题。

在这类问题中，问题的根源通常是minimum sizing algorithm on flex items。这些规范是规范的一部分，可防止 flex 元素缩小到其内容的大小以上。这种行为会阻止滚动条呈现，因为内容不会溢出 flex 元素。它只是扩展它。

但是在这种情况下，似乎没有一种方法可以覆盖该行为(例如min-height: 0，overflow: hidden)。

这里有两个建议可以使您更接近解决方案:

(1)由于您希望整个布局都显示在视口(viewport)中(即浏览器窗口中没有垂直滚动条)，因此请勿使用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

关于css - 在Safari，Firefox和Edge VS Chrome上具有(overflow-y)滚动的flexbox的不同行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43175481/