I'm currently working on a modal using Mui Modal and I've encountered an issue.
Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if there are more than 5 in the cart.
I've tried setting overflow: auto, overflow: scroll, and overflowY: scroll on the parent div but none of these solutions have worked for me. Any suggestions?
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<div
style={{
minHeight: "500px",
width: "500px",
backgroundColor: "gray",
gap: "10px",
display: "flex",
flexDirection: "column",
overflowY: "scroll",
}}
>
{cart.map((displate) => {
return (
<Card
sx={{
height: "200px,
display: "flex",
padding: "10px",
gap: "10px",
backgroundColor: "black",
margin: "10px",
}}
>
<div
style={{
backgroundImage: `url(${displate.img})`,
backgroundSize: "cover",
backgroundPosition: "center",
height: "150px",
width: "120px",
}}
></div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
color: "white",
}}
>
<Typography>Name: {displate.name}</Typography>
<Typography>Size: {displate.size}</Typography>
<Typography>Finish: {displate.finish}</Typography>
<Typography>Frame: {displate.frame}</Typography>
<Typography>Quantity: {displate.quantity}</Typography>
</div>
</Card>
);
})}
</div>
</Modal>