y）在Safari，Firefox和Edge VS Chrome上滚动
在这个关于plunker的页面上（https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview）有一个奇怪的问题。
在Windows和Android上的Chrome（加那利也），一切正常。 我可以滚动两个区域（左侧和右侧），页面的顶部和底部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;
}
怪癖的例子：
只需点击此按钮，即可在iPad或iPhone上看到：
为什么会这样？ Safari和Firefox的bug还是Chrome的？ 为什么在Chrome上一切都很好，在Windows和Android上？ 如果在未来的新Safari中，这将运行良好，如何处理较旧的iOS和Firefox的旧设备？
我会很感激任何答案。 谢谢。
这既是一个令人沮丧又神秘的问题。
这类问题中问题的来源通常是弹性项目的最小尺寸算法 。 这些规则是规范的一部分，它可以防止弹性项目缩小超过其内容的大小。 这种行为阻止了滚动条的渲染，因为内容无法溢出Flex项目。 它只是扩展它。
但是，在这种情况下，覆盖该行为的标准方法（例如， 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和其他“非工作”浏览器需要在该容器上定义的高度。
修改演示
Michael_B的回答是不够的。 90vh不适用于动态页眉，页脚和其他div。
我解决了这个问题（暂时的，直到Safari修复这个问题）在父div上：
min-height: 100vh; height: 100vh;
和
flex: 1; min-height: 0;' 对第一个孩子。
但气味很重。
尝试：
margin: auto;
在Flex项目的CSS中 - 为我做了诡计（看起来像汽车在这里做魔术......）
想要分享这个发现，因为min-height，overflow-x等......对我来说都不可靠。
链接地址: http://www.djcxy.com/p/75641.html