Overflow issues on children of display:flex on hover

[chadfurman]

So... not sure why...

This page demos it perfectly:
https://chrome-flexbox-bug.mariusgundersen.net/

the repo is here:
https://github.com/mariusGundersen/chrome-flexbox-bug

Seems the solution is setting min-height: 0 or min-width:0 on the container element

[jpdevries]

What browser (and version) are you experiencing the issue in?

[chadfurman]

Google Chrome Version 48.0.2564.97 (64-bit) -- Debian 8 Linux Kernel 3.16.0-4-amd64

[jpdevries]

@chadfurman there is a known issue in Chrome 48. The min-height:0;min-width:0 trick is a known work around. If you test in Chrome Canary (or apply the work around) I assume the layout will look correct. angular/material#6841 (comment)

[chadfurman]

still took me a coons age to figure out. Figured it should be documented in the list of "Flexbox Bugs" eh?

[jpdevries]

I suppose it should be documented yes. I'd offer to give it a go, but I'm just coming up for air after having to fulfill emergency support for v48 on a bunch of flexbox layouts myself 😃 🔧

[philipwalton]

Sorry, but it's not clear to me from a quick look at the demo what the problem is, and I don't have time to dive into the source to figure it out.

Please clearly state what the expected behavior is and what's happening instead.

[chadfurman]

Hovering over the red box causes the box below it to shift position on my browser version. Probably not happening on your browser version if you can't see it right away.

[philipwalton]

I'm not seeing anything weird happen on Chrome 48 for Mac. If it's only happening on Chrome for one platform, it's probably just a Chrome bug and should probably be reported. Can you submit an issue to http://chromiumbugs.appspot.com?