在 Safari、Firefox 和 Edge VS Chrome 上带有（溢出-y）滚动的 flexbox 的不同行为

Posted 2023-03-06

【中文标题】在 Safari、Firefox 和 Edge VS Chrome 上带有（溢出-y）滚动的 flexbox 的不同行为

【英文标题】：Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

【发布时间】：2017-08-27 18:42:41

【问题描述】：

在 plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) 的这个页面中，有一个奇怪的问题。

在 Windows 和 android 上的 Chrome（也包括 Canary）上，一切正常。我可以滚动两个区域（左侧和右侧），页面的顶部和底部 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 的旧设备？

我将不胜感激。谢谢。

【问题讨论】：

也许事情已经改变了，但到目前为止，对于 Windows 上的 Chrome，我看到了与您在其他平台上看到的相同的问题，我不知道如何使滚动弹性框嵌套在里面引导列的数量，因为一旦你想要列，你就会打破列方向弹性框的“链”，直到顶部的全视口大小容器。如果现在有人能够做到这一点，那就太酷了！

【参考方案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

【讨论】：

我试过这个解决方案（高度：90vh），它可以工作，但我在页面中有动态页脚和页眉，尤其是在所有设备（iPhone、iPad、Android...）上。我不相信这在 2017 年是可能的！ :( :(

尝试改变 html 的结构。也许使用更少的容器。

github 上的一个非常好的人建议这样做：github.com/twbs/bootstrap/issues/22339#issuecomment-291356383: (1) 将 min-height:0 添加到 .main 元素 (2) 将 flex-wrap 重置为其初始值 (nowrap) on .row 元素。你怎么看？它不适用于 iOS 上的 Safari，仅适用于 Windows 上的 Chrome 和 Firefox。

+1 以获得非常好的书面答案。我自己之前遇到过这个问题，解决方案是确保伸缩容器内有内容以赋予其块高度，或者在容器上设置实际高度。 @JohnSam 如果我可以大胆地建议查看caniuse - 特别是查看页面底部的已知问题 部分。您似乎也有一个非常具体的布局问题，可能想考虑从不同的角度解决它？你考虑过使用 jQuery 吗？

【参考方案2】：

Michael_B 的回答是不够的。 90vh 不适用于动态页眉、页脚和其他 div。

我用这个在父 div 上修复了这个（暂时，直到 Safari 修复这个）：

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

和

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

但是气味很重。

【参考方案3】：

试试：

margin: auto;

在 flex-item 的 css 中 - 这对我有用（似乎 auto 在这里发挥了魔力......）

想分享这个发现，因为 min-height、overflow-x 等……对我来说也不是很可靠。