Safari、Firefox 和 Edge 与 Chrome 在使用 (overflow-y) 滚动时的 flexbox 行为不同。

Question

在这个Plunker页面（https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview）上存在一个奇怪的问题。

在Windows和Android的Chrome浏览器上（包括Canary版本），一切正常。我可以滚动左右两个区域，并且页面顶部和底部的div始终显示在设备屏幕的顶部和底部（如下图所示）。

在iPad或iPhone上，使用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的bug，还是Chrome的bug？ 为什么在Windows和Android上的Chrome上一切正常？ 如果将来新版的Safari能够正常工作，那么如何处理旧版iOS和firefox设备呢？

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

- user4412054

---

也许情况已经改变，但就目前而言，在Windows上的Chrome浏览器中，我看到了您在其他平台上曾经遇到的同样问题，并且我无法弄清楚如何使嵌套在Bootstrap列中的滚动flex-boxes正常工作，因为一旦您想要使用列，就会打破从底部到顶部的全视口大小容器的列方向flex-boxes的“链条”。如果现在有人能够做到这一点，那就太棒了！ - C.List

Answer 1

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

这类问题的根源通常在于flex项的最小尺寸算法。这些规则是规范的一部分，防止flex项缩小到其内容大小以下。这种行为会阻止滚动条的呈现，因为内容无法溢出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 Benjamin

---

我尝试了这个解决方案（高度：90vh），它有效，但是我的页面中有动态页脚和页眉，特别是在所有设备上（iPhone、iPad、Android...）。我不相信这在2017年是可能的！:( :( - user4412054

尝试改变HTML的结构。也许使用更少的容器。 - Michael Benjamin

一个在Github上非常好的人建议这样做：https://github.com/twbs/bootstrap/issues/22339#issuecomment-291356383： （1）在.main元素中添加min-height:0 （2）在.row元素上将flex-wrap重置为其初始值（nowrap）。你觉得呢？它在iOS的Safari上不起作用，只在Windows的Chrome和Firefox上起作用。 - user4412054

+1 对于非常好的答案。我自己以前也遇到过这个问题，解决方法是确保弹性容器内有内容以给它一个块高度，或者在容器上设置实际高度。@JohnSam 如果我可以大胆建议您查看caniuse - 特别是底部的“已知问题”部分。似乎您在这里有一个非常特定的布局问题，可能要考虑从不同的角度来解决它？您考虑过使用jQuery吗？ - Frits

Answer 2

迈克尔的答案还不够。使用`90vh`不能与动态标头，页脚和其他div一起使用。

我通过对父div进行以下调整来修复这个问题（暂时性的，直到Safari解决此问题）：

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

以及在第一个子元素上加上

`flex: 1; min-height: 0;`

但是会产生较大的问题。

- user4412054

Answer 3

尝试：

margin: auto;

在flex项目的CSS中 - 对我来说这就是解决办法（似乎auto在这里起了魔力...）

想要分享这个发现，因为min-height、overflow-x等都对我没有可靠的作用。

- Jürgen Fink