Material-ui: flexbox is placing items differently between renders

[jannnik]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Clicking and hovering around in the CodeSandbox example leads to resizing of the grid items.

Expected Behavior 🤔

The grid items should stretch always to 100% width.

Steps to Reproduce 🕹

1. Open the Example: https://codesandbox.io/embed/create-react-app-with-typescript-ojqcp
2. Click around or hover around. Hovering the TextFields or the Button after clicking or hovering the "Monster Link" leads to shrinking of the TextFields or Button as like their fullWidth={true} is ignored.

Context 🔦

Removing the "Monster Link" from the example seems to fix the issue and it is not clear what kind of side effect the link has to the other components or the flex layout.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.3.1 (latest) |
| React | latest |
| Browser | Chromium 76.0.3809.87 on macOS Mojave, Ubuntu 18.10 |
| | Chrome 76, Windows 10 (BrowserStack) |
| TypeScript | latest |

[oliviertassinari]

@jannnik I'm not sure to follow. It's a Browser engine issue, right? Or it can be reproduced among different browsers or platforms?

[jannnik]

@oliviertassinari we are not sure whether it is a browser engine issue. We could only reproduce it in Chrome 76 (only in Browserstack) and Chromium 76 and not in other browsers.

Maybe it's an issue related to this kind of flexbox layout in combination with the Material UI TestFields and Grid. After breaking down the problem to this minimal example, I think this could be a problem for more Material UI users.
What would you suggest to solve this problem?

[oliviertassinari]

@jannnik I could further simplify the reproduction down to https://codesandbox.io/s/create-react-app-with-typescript-1wiru. I could reproduce it on Windows Chrome 76 and 77 (browserstack). I don't see any logical explanation for it. It works correctly on Chrome 75.

I think that we should leave it there, and report the regression on Chromium side. I doubt we can do anything about it here. Do you want to take care of the report?

[foxylion]

I created an issue in the Chromium issue tracker, hopefully the information is enough to identify the root cause.

https://bugs.chromium.org/p/chromium/issues/detail?id=992010

[oliviertassinari]

@foxylion Thank you! The regression seems to be confirmed :).

[lookfirst]

I'm seeing this as well. Putting width: 100% on the grid items fixes it. You don't even need alignItems=stretch and it comes up.

[foxylion]

A fix is already implemented in Chrome 77. Should be released in the next two weeks.

[jarommadsen]

Just updated to v77.0.3865.90 and am still experiencing this bug in #17346. The above codesandbox also appears to still be having issues in this latest version.

[oliviertassinari]

Chromium has reverted the fix as it was breaking Wordpress: https://bugs.chromium.org/p/chromium/issues/detail?id=992010.

[oliviertassinari]

Consider upvoting this issue (👍) to give it more "weight" for the Chrome Team. I doubt we have more leverage other than reporting the problem. The issue seems to related to the ripple, but it makes little sense.

So far, we have the following reproductions with Chrome v77.0.3865.90:

• https://codesandbox.io/s/create-react-app-with-typescript-ojqcp (#16912)
• https://codesandbox.io/s/flex-direction-column-bug-8seqs (#17346)
• https://codesandbox.io/s/holy-thunder-nuodj (#17521)
• https://codesandbox.io/s/charming-driscoll-73nb6 (#17554)

[jarommadsen]

~As far as it making "sense", this commit seems the most likely culprit from their changelog. From my understanding, they reworked some magical logic to cache flexbox sizing to boost performance.~ It might be partially related to the ripple but the example in this issue is caused by a link click. In my live project it's caused by triggering error helper text under the email field.

Edit: Nevermind about that commit, I just read through the Chromium ticket and they've already identified what commit caused the bug. I'll put my detective hat away now...

[oliviertassinari]

I have tried with the 4 reproductions we have available with Chrome Canary:

| URL | v77.0.3865.90 (stable) | v79.0.3923.0 (canary) |
|--|--|--|
| https://ojqcp.csb.app/ | ❌ | ✅ |
| https://nuodj.csb.app/ | ❌ | ✅ |
| https://73nb6.csb.app/ | ❌ | ✅ |
| https://8seqs.csb.app/ | ❌ | ✅ |

It seems that we are good :)

[yduman]

Omg this bug was driving me nuts! I double-checked my code over and over again until I found this issue. This is happening with my case:

The suggestion from @lookfirst helped! Thanks!

[marcusjwhelan]

.MuiGrid-container {
    width: 100%;
    /* display: flex; */
    /* flex-wrap: wrap; */
    box-sizing: border-box;
}

fixed https://codesandbox.io/s/create-react-app-with-typescript-ojqcp (#16912)
and https://codesandbox.io/s/flex-direction-column-bug-8seqs (#17346)
As far as I can tell. Something with the use of flex on Grid in Chrome? Just trying to help.

[dspatoulas]

In my use case, I have a grid container with cards inside of the grid items. Overriding the flexWrap property fixes the issue I had (similar to the one @yduman posted above). This solution does have the drawback that containers will no longer wrap correctly (resulting in my cards no longer auto flexing to the next row), but is better than the card flexing across the screen IMO. Hopefully, this issue will be fixed in chrome soon!

MuiGrid: {
  container: {
    flexWrap: 'unset'
  }
}

[oliviertassinari]

I can no longer reproduce the problems on Chrome v78.0.3904.108. I think that we can close :).