[Grid] large spacing causes horizontal overflow

[ohlr]

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

Current Behavior 😯

Overflow with large spacing

Expected Behavior 🤔

No overflow with large spacing

Steps to Reproduce 🕹

Include code to reproduce,:
https://codesandbox.io/s/wispy-monad-zqwlf?file=/src/Demo.js
https://zqwlf.csb.app/

On small browsers a horizontal scrollbar appears beacause of overflow.
Issue is only present for large spacing

[tchmnn]

Hey @ohlr,
I think this is known behaviour.
I found this section in the docs: https://material-ui.com/components/grid/#negative-margin
Notice how the scrollbar disappears when a padding to the container is applied.
https://codesandbox.io/s/lucid-davinci-v407s?file=/src/Demo.js

(v1 to v4)

[ohlr]

Thank you @tchmnn, somehow I always overread that part of the docs

[otaviobonder-deel]

@tchmnn if I want to use a full-width Grid with a background-color, applying a padding to the parent element will make my Grid shrink, and I'll have different color borders (background one color, grid another color). What's the best approach in this case?

[tchmnn]

@otaviobps
I'm sorry, I'm not sure if I understand your question 😄
Would you mind rephrasing or visualizing it? Or maybe provide a codesandbox reproducing your issue.

[otaviobonder-deel]

Hey @tchmnn thanks for replying.

I made a question at stack overflow about it: https://stackoverflow.com/questions/62942858/how-to-use-material-ui-grid-for-spa-negative-margin-problem

Thanks!

[oliviertassinari]

The issue is fixed in v5. For instance, with @otaviobps's reproduction: https://codesandbox.io/s/friendly-wescoff-xvukw?file=/src/Demo.js. It was fixed in #24332.

[oliviertassinari]

Duplicate of #7466

[EugeneGohh]

Hey @ohlr,
I think this is known behaviour.
I found this section in the docs: https://material-ui.com/components/grid/#negative-margin
Notice how the scrollbar disappears when a padding to the container is applied.
https://codesandbox.io/s/lucid-davinci-v407s?file=/src/Demo.js

It works, thanks.