18

After a few of my customers upgraded to Chrome v72 they've noticed a few layout issues that were not present in <= v71. From what I've found it mostly occurs when having an element with overflow: auto or overflow: scroll within a parent element that is using flexbox to position its children.

Is anyone else experiencing this? Note this is only occurring in v72, I've tested < 72 and other webkit browsers and can't reproduce it.

kwahyaj
  • 181
  • 1
  • 4
  • overflow-y:auto stopped working for me completely. – Mike Jan 30 '19 at 19:07
  • [jsfiddle](https://jsfiddle.net/ow9f2vbh/4/) Here is a jsfiddle reproducing the issue, the text content should be scrollable. – kwahyaj Jan 30 '19 at 21:31
  • setting height to 0 fixed the issue. What I never noticed was this was an existing issue in Edge and FF. So adding height:0 fixed it for all browsers. – Mike Jan 31 '19 at 01:19
  • We ended up using overflow: hidden and height: 100% for our use case. – kwahyaj Jan 31 '19 at 21:34
  • 4
    There has been a bug filed for it on the Chromium issue tracker. [issue](https://bugs.chromium.org/p/chromium/issues/detail?id=927066). Using `min-height: 0;` and `flex-grow: 1;` has solved it for me. – nerdyman Feb 01 '19 at 10:52
  • 1
    Hi guys I've run into the same issue. Umm the fixes mentioned above ...were they added on the flex parent or children? – Craig Mar 01 '19 at 14:57

2 Answers2

15

Looks like Chrome renders flex boxes with overflows differently since v72. At least parts of those changes were intentional to make Chrome more compliant to the spec and other browsers.

See this issue for details: https://bugs.chromium.org/p/chromium/issues/detail?id=927066

Update:

We've heard you loud and clear and have decided to revert the change in Chrome 72 to avoid breaking existing sites and to allow developers a bit more time to update their pages.

The change will instead ship with Chrome 73. As such it's still important to make the required changes to avoid breaking it in future versions of Chrome and to ensure compatibility with Firefox.

2019-02-05 22:44:28 UTC

Community
  • 1
  • 1
a.xin
  • 356
  • 1
  • 8
  • 2
    **Update:** `We've heard you loud and clear and have decided to revert the change in Chrome 72 to avoid breaking existing sites and to allow developers a bit more time to update their pages. The change will instead ship with Chrome 73.` https://bugs.chromium.org/p/chromium/issues/detail?id=927066#c77 – lalo Feb 05 '19 at 23:16
  • We experienced the same success as someone in the thread above: overflow: hidden down the tree a few places fixed it for us. – David Apr 03 '19 at 22:48
0

Seems like this shipped in Chrome 73, confirmed by a.xin's answer above.

The quick and dirty fix that worked for me is adding "min-height: 0" to all of the flex children.

Joshua Verdehem
  • 43
  • 4