Overflow with large spacing
No overflow with large spacing
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
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
Thank you @tchmnn, somehow I always overread that part of the docs
@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?
@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.
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!
Most helpful comment
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