CODEWITHSUNDEEP
cssreactjsscrollmaterial-ui
421
421

Reputation: 343

How to implement vertical scrolling of a grid items within a grid in material ui?

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?

Upvotes: 5

Views: 5524

Answers (1)

Steve G
Steve G

Reputation: 13367

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

Upvotes: 7

Related Questions