Scrollable List Component from Material-UI in React

31
votes

How to make the List component (see https://material-ui.com/components/lists/) fixed-size and scrollable? Every time I add a new ListItem the List expands, however I would like to be able to scroll through it if content gets bigger than the container.

2
reactjsmaterial-ui

2 Answers

72
votes

I just found out that you can add properties. 'maxHeight' and 'overflow' are the ones I was needing to solve my problem. For example for a List in a Paper container:

<Paper style={{maxHeight: 200, overflow: 'auto'}}>
  <List>
   ...
  </List>
</Paper>
22
votes

This works if you want the list to fill all height of the container:

<List style={{maxHeight: '100%', overflow: 'auto'}} />