My Material UI dialog consists of a grid with a scrollbar that allows scrolling even though the content fits on the screen.
<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>
You can view this code at https://codesandbox.io/s/cool-cherry-or0r8.
I prefer not to use overflow: hidden as I want the page to show a scrollbar when necessary. The issue seems related to how flexbox interacts with negative margins in the <Grid> component, but I haven't been able to resolve it yet.