Different behavior of flexbox with (overflow-y) sc

Question

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.

Answer 1

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

Answer 2

Try:

margin: auto;

in the css for the flex-item - that did the trick for me (seems like the auto does the magic here ...)

Wanted to share that finding, as min-height, overflow-x, etc ... did not work reliably for me neither.

Answer 3

The Michael_B's answer is not enough. 90vh doesn't work with dynamic header, footer and other divs.

I fixed this (temporarily, until Safari fix this) with this on parent div:

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

and

flex: 1; min-height: 0;' on the first children.

But the smell is heavy.