Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

[ghost]

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.

[dholbert]

I don't know precisely why yet, but the discrepancy goes away (i.e. the Firefox rendering changes to match your expectations) if you:
(1) add min-height:0 to the .main element
(2) reset flex-wrap to its initial value (nowrap) on the .row element.

Demo with those changes: https://plnkr.co/edit/ANrNNl4yFvcg2NEe8PQF?p=preview

[ghost]

It works, but just in Firefox on Windows, not in Safari on iOS.

[ghost]

Can I ask you if the problem is of Chrome or of Safari? I mean, is Chrome following the specifications and other browsers not? Is this true? We have to use workaround for scroll div with flexbox in Bootstrap 4 in Safari? It's possible?

[dholbert]

Sorry, I don't know enough about the internals of Chrome & Safari to know which one is wrong on my amended plnkr. My guess would be that Safari's wrong, though, because latest Chrome/Firefox/Edge all agree.

[ghost]

@dholbert Yeah, and this is a big problem. Because every browser on iOS is Safari engined!

[mdo]

I don't believe this isn't a Bootstrap bug, but rather a problem with flexbox and custom CSS. Reduce your code down if you can determine it to be a bug on our end, otherwise it looks like you'll need some additional CSS to clean this up.

[ghost]

What I can reduce? People better than me here and on stackoverflow doesn't know what to reduce in jsfiddles.

[nicolasxu-bg]

min-height:0 fixed my issue!