小编use*_*812的帖子

我有一个包含网格的简单 Material UI 对话框，它有一个滚动条，即使屏幕大到足以包含整个内容，它也可以滚动几个像素。

      <Dialog open={isOpen} onClose={() => changeIsOpen(false)}>
        <DialogContent>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <TextField label="First Name" fullWidth />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField label="Last Name" fullWidth />
            </Grid>
            <Grid item xs={12}>
              <TextField label="Username" fullWidth />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button
            color="secondary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            Cancel
          </Button>
          <Button
            color="primary"
            variant="contained"
            onClick={() => changeIsOpen(false)}
          >
            OK
          </Button>
        </DialogActions>
      </Dialog>

此代码位于https://codesandbox.io/s/cool-cherry-or0r8供您查看。

我不想使用overflow: hidden，因为如果页面太小，就会有一个滚动条，这是正确的。（在这个有 3 个字段的玩具示例中不太可能发生，但在较大的对话框中很容易发生）。

我认为这个问题与 flexbox 和使用的负边距之间的交互有关<Grid>，但我无法完全解决。