[Grid] Spacing on grid causes horizontal scrolling

[BiancaArtola]

I am using the Material UI library on my project. I use the Grid component and I am having some issues when I add the property spacing to the Grid container.
When I add the spacing (in this case only 1), the CSS is updated to:

With these props, the scrollbar appears on my screen that allows me to scroll horizontally. I don't want this, I only want to add some padding between my rows.

I read several people that also have this issue on the internet, but I don't like the solutions that they proposed. I think that an internal fix is needed on the library.

• https://stackoverflow.com/questions/45519275/grid-in-material-ui-causes-horizontal-scroll-react
• [Grid] large spacing causes horizontal overflow #21507

Here is my code:

<Grid container className={classes.container} spacing={1}>
      <Grid item xs={12}>
        <Typography type="h2">Test info</Typography>
      </Grid>
      <Grid item xs={11} md={9} lg={7}>
        <Card>
          <Grid container spacing={1}>
            <Grid item xs={4} md={4} lg={4}>
              <Typography type="h2">Test info</Typography>
            </Grid>
            <Grid item xs={8} md={8} lg={8}>
              <Input onChange={() => console.log("test")} />
            </Grid>
            <Grid item xs={4} md={4} lg={4}>
              <Typography type="h2">Test info</Typography>
            </Grid>
            <Grid item xs={8} md={8} lg={8}>
              <Input onChange={() => console.log("test")} />
            </Grid>
            <Grid item xs={4} md={4} lg={4}>
             <Typography type="h2">Test info</Typography>
            </Grid>
            <Grid item xs={8} md={8} lg={8}>
              <Input onChange={() => console.log("test")} />
            </Grid>
          </Grid>
        </Card>
      </Grid>
    </Grid>

-----

const useStyles = makeStyles(() =>
  createStyles({
    container: {
      padding: "1rem",
      height: "fit-content",
    },
  })
);

Can you please help?
Thanks

[oliviertassinari]

Duplicate of #7466