Here is the current code I have:
HTML
return (
<Card {...props} className={` ${classes.root} ${rootClassName}`} onClick={onClick}>
{children}
<div className={classes.box}>
<ul>
{props.pizzas?.toppings?.map((topping) => (
<li key={topping.id} className={classes.list}>{topping.name}</li>
))}
</ul>
</div>
</Card>
);
CSS
const useStyles = makeStyles((theme: Theme) => ({
root: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
padding: theme.spacing(2, 2, 2),
height: theme.typography.pxToRem(500),
'&:hover': {
cursor: 'pointer',
},
},
box: {
height: '300px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
},
list: {
flex: '0 0 70px',
}
}));
The image below shows how my list currently looks. I would like the list items to wrap if there is space without overlapping each other, and stack together at the bottom if there are more toppings.
https://i.sstatic.net/uMSRN.png%5D
Thank you!