3

How does one add vertical scrolling functionality to a grid container, such that its components can be vertically scrolled through if the height of the components exceeds some max?

421
  • 203
  • 1
  • 5
  • 13

1 Answers1

4

Assuming you're using the latest MUI, it can be as simple as adding overflowY: 'scroll' and setting a maxHeight via the Grid container's sx prop (or its parent element). For example:

      <Grid
        sx={{ overflowY: "scroll", maxHeight: "250px" }}
        container
        spacing={2}
      >
        ...
      </Grid>

Working CodeSandbox: https://codesandbox.io/s/mui-5-scrollable-grid-gjxfq?file=/demo.js

Steve
  • 11,596
  • 7
  • 39
  • 53