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

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

这类问题的问题来源通常是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

Answer 2

Michael_B的答案还不够。 90vh不适用于动态页眉，页脚和其他div。

我在父div上修正了这个（暂时，直到Safari修复此问题）：

min-height: 100vh; height: 100vh;

和

flex: 1; min-height: 0;'关于第一个孩子。

但气味很重。

Answer 3

尝试：

margin: auto;

在flex项目的CSS中 - 这对我来说很有效（似乎 auto 在这里有魔力......）

想要分享这个发现，因为 min-height ， overflow-x 等......对我来说也不能可靠地工作。

在Safari，Firefox和Edge VS Chrome上使用（overflow-y）滚动的flexbox的不同行为

3 个答案:

revised demo