Material-ui: [Grid] large spacing causes horizontal overflow

[ohlr]

• [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 😯

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

[ohlr]

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

[otaviobps]

@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 :smile:
Would you mind rephrasing or visualizing it? Or maybe provide a codesandbox reproducing your issue.

[otaviobps]

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!