在Safari，Firefox和Edge VS Chrome上使用（overflow-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 {
 display：flex; 
最小高度：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的旧设备？

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

解决方案

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

这类问题的来源通常是 弹性项目的最小大小调整算法 。这些规则是规范的一部分，可以防止弹性项目缩小超过其内容的大小。这种行为阻止了滚动条的渲染，因为内容不能溢出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 {
高度：90vh; 
 
 
 
 
 
 $ b因此，看来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上使用（overflow-y）滚动的flexbox的不同行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！