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.
Add a comment
|
3 Answers
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>
Comments
This works if you want the list to fill all height of the container:
<List style={{maxHeight: '100%', overflow: 'auto'}} />
1 Comment
Chase Sandmann
This only works if the parent element also has a height defined which material components tend not to do
In my case I was looking for a way to make the content inside a <Card /> to be scrollable, in case the amount of text was larger than the maxHeight of the card.
This worked perfectly for me:
<Card sx={{ minHeight: '60vh', overflow: 'auto' }}></Card>
