Search code examples
htmlcss

Flex Justify Content Behaviour Changed In Chrome 133

The behaviour of justify-content: stretch has changed between versions 132 and 133 of chromium. This is causing us huge visual issues on our WebApp.

 <div style="background: grey; display: flex; justify-content: stretch;" >
   <div style="width: 50px; height: 50px; background: brown;"></div>
   <div style="width: 50px; height: 50px; background: orange;"></div>
   <div style="width: 50px; height: 50px; background: red;"></div>
 </div>

In Chromium 132 it will display as the following

enter image description here

Whereas in Chromium 133 it will display as

enter image description here

99% of our flex elements had a default of stretch which means that our entire styling is broken with this new update. We are now having to consider rolling out hot-fixed versions of old releases with an update to replace with default of stretch with flex-start. This seems like a huge breaking change (even if the new implementation makes more sense).

My question is - am I doing something obviously wrong?

I've searched online and I'm not seeing anyone else reporting this issue, so it seems like we're the only ones facing it.

Solution

  • This has already reported as a bug - https://issues.chromium.org/issues/395659796

    In the circumstances, if you can, I'd wait for it to be resolved. In the interim, a search and replace might be advisable.