1442273 - overflow issue with flex

Status: RESOLVED DUPLICATE of bug 1136312

(Core :: Layout, defect)

Description

[frlinw]

Attachment: Overflow flex issue: firefox/chrome comparison

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36

Steps to reproduce:

https://codepen.io/frlinw/pen/jZdoEa


Actual results:

`overflow: auto` on a child is ignored if the parent is display: flex


Expected results:

overflow:auto on a child shouldn't be ignored

Comment 1

[roxleitan]

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180305220117

Managed to reproduce the issue on Windows 10 x64 on Firefox 57.0, Firefox 58.0.2, latest Nightly 60.0a1(2018-03-05) and Beta 59.0b14.
Please note that the issue is visible only when the window is not maximized.

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Boro sangui from comment #0)
> 
> Actual results:
> 
> `overflow: auto` on a child is ignored if the parent is display: flex

We're not ignoring it -- we're just sizing one of that child's ancestors (the .content element in this case) to be quite large, so that no overflow is necessary. This comes from the flexbox spec's "implied minimum size of flex items" default behavior.

That spec text changed such that the "width:100%" is supposed to reduce that implied minimum size, though -- so this is indeed a Firefox bug. It's the same thing described in bug 1443274 and bug 1331692, and bug 1136312 roughly covers the changes that need to happen here.

Comment 3

[Daniel Holbert [:dholbert]]

BTW - thanks for reporting the bug, Boro!

If you happen to be running into this on a site that you're working on, you can work around it by giving the .content element "min-width:0". Here's a testcase with that change:
https://codepen.io/anon/pen/mXNyQx

Or you could get the same result (and maybe feel a bit less magic) with "min-width:100%" alongside your existing "width:100%":
https://codepen.io/anon/pen/OQKPrB

The point is, this is a bug in the flexbox-specific behavior of the default "min-width:auto" keyword, so if you steer the browser away from that keyword in this case, you can avoid this bug.

Comment 4

[frlinw]

Thanks for these testcases but it's a bit weird, your 2 pens are in a reload loop on firefox 58.0.2 (It's fine on chrome).

Comment 5

[Daniel Holbert [:dholbert]]

Huh, that's odd! I can't reproduce that reload loop - tested Firefox 58.0.2, with me logged in as well as logged out from CodePen.

(I'm guessing the issue has to do with the fact that I posted them as anonymous - I know codepen sometimes posts a little nag popup about that when you load an anon-posted pen. *shrug*)