How to Apply vertical Scroll to material ui ListItem-CodePudding

there are 9 items in the selectedPLayers Array want to apply vertical scroll, only show 2 items rest should come on scrolling

<List>
{
                  props.selectedPLayers && props.selectedPLayers.map((item, index) =>{ 
                    return (
                      <>
                        <ListItem alignItems="flex-start" >
                          <ListItemAvatar>
                            <Avatar alt="Remy Sharp">{getInitials(item.name)}</Avatar>
                          </ListItemAvatar> 
                           <Typography>{item .name}</Typography>                      
                        </ListItem>
</List>

CodePudding user response：

Have you try this simple hack ?

<List style={{maxHeight: '250px', overflow:'auto'}}>
{
                  props.selectedPLayers && props.selectedPLayers.map((item, index) =>{ 
                    return (
                      <>
                        <ListItem alignItems="flex-start" >
                          <ListItemAvatar>
                            <Avatar alt="Remy Sharp">{getInitials(item.name)}</Avatar>
                          </ListItemAvatar> 
                           <Typography>{item .name}</Typography>                      
                        </ListItem>
</List>