Пример диалогового окна Simple Material UI имеет нежелательную полосу прокрутки

Question

У меня есть простое диалоговое окно 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>, но я не совсем понимаю.

Answer 1

Замените DialogContent на следующее:

<DialogContent>
  <div style={{ overflow: "hidden", height: "100%", width: "100%" }}>
    <div
      style={{
        paddingRight: 17,
        height: "100%",
        width: "100%",
        boxSizing: "content-box",
        overflow: "scroll"
      }}
    >
      <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>
    </div>
  </div>
</DialogContent>

Демо: https://codesandbox.io/s/09ng6

Кредит на этот ответ: https://stackoverflow.com/a/16671476/7427111