在 Safari、Firefox 和 Edge VS Chrome 上使用(溢出-y)滚动的 flexbox 的不同行为 [英] Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

问题描述

在 plunker 上的这个页面 (

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

页面很长，右边只有一个滚动条，就像页面上没有flexbox一样，这段代码就被忽略了:

.bigone {显示:弹性；最小高度:100vh；弹性方向:列；}.主要的 {弹性:1 1 0；显示:弹性；}.container-fluid {显示:弹性；}.col-6 {溢出-y:自动；}

怪癖示例:

您只需点击此按钮即可在 iPad 或 iPhone 上查看:

为什么会出现这种行为?Safari 和 Firefox 的错误还是 Chrome 的错误?为什么在 Chrome 上，Windows 和 Android 上的一切都很好?如果将来在新的 Safari 中这会很好用，那么如何处理带有旧版 iOS 和 Firefox 的旧设备?

我将不胜感激.谢谢.

解决方案

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

这类问题的根源通常是弹性项目的最小尺寸算法.这些规则是规范的一部分，可防止 flex 项目缩小超过其内容的大小.这种行为会阻止滚动条呈现，因为内容不能溢出 flex 项目.它只是扩展了它.

但是在这种情况下，覆盖该行为的标准方法(例如，min-height: 0、overflow: hidden)似乎都不起作用.

这里有两个建议可能会让您更接近解决方案:

(1) 由于您希望整个布局出现在视口中(即浏览器窗口上没有垂直滚动条)，所以不要使用 min-height 来调整容器的大小.这允许容器扩展.改用固定高度.

对您的代码进行此调整:

.bigone {显示:弹性；/* 最小高度:100vh；<-- 删除 */高度:100vh；/* <-- 新的 */弹性方向:列；}

但这本身并不能解决问题.

(2) 一个简单快捷的解决方法是在.col-6上设置一个高度.

将此添加到您的代码中:

.col-6 {高度:90vh；}

因此，Edge、FF 和其他非工作"浏览器似乎需要在该容器上定义高度.

修订版演示

In this page on plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) there is a weird problem.

On Chrome on Windows and Android (Canary also) everything works good. I can scroll the two areas (on the left and on the right) and the top and bottom div of the page are on the top and on the bottom of my device screen. I see them anytime (see the picture below).

On iPad or iPhone, iOS, with Safari or Chrome, this is not what I get. And also on Firefox 47.0.1 on Windows.

The page is long and there is just one scroll on the right, like if there is no flexbox on the page, this code is just ignored:

.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 example:

You can see on the iPad or iPhone just by a click on this button:

Why this behaviour? Safari and Firefox bug or Chrome's one? Why on Chrome everything good on Windows and Android? And if in the new Safari in the future this will work good, how to do with the older devices with older iOS and firefox?

I will appreciate any answer. Thanks.

解决方案

It's both a frustrating and mysterious problem.

The source of the problem in these sorts of questions is normally the minimum sizing algorithm on flex items. These rules, which are part of the spec, prevent a flex item from shrinking past the size of its content. Such behavior prevents a scrollbar from rendering because the content cannot overflow a flex item. It simply expands it.

But none of the standard methods to override that behavior (e.g., min-height: 0, overflow: hidden) seem to work in this case.

Here are two suggestions that may get you closer to a solution:

(1) Since you want the entire layout to appear in the viewport (i.e., no vertical scrollbar on the browser window), don't use min-height to size the container. That allows the container to expand. Use a fixed height instead.

Make this adjustment to your code:

.bigone {    
    display: flex;
    /* min-height: 100vh;   <-- REMOVE */
    height: 100vh;       /* <-- NEW   */
    flex-direction: column;
}

But that, by itself, doesn't solve the problem.

(2) A simple and quick solution to the problem is to set a height on .col-6.

Add this to your code:

.col-6 {
    height: 90vh;
 }

So it would appear that Edge, FF and the other "non-working" browsers need a defined height on that container.

revised demo

这篇关于在 Safari、Firefox 和 Edge VS Chrome 上使用(溢出-y)滚动的 flexbox 的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！