Div not scrolling when items overflow - css

Question

I have the following code for a modal using Mui Modal.
Everything works except when I add more items to the cart. When this happens and the minHeight exceeds 500, it continues to 100vh and then stops and only shows 5 items, even if there are well over 5 items in the cart.
I gave the parent div overflow: auto, overflow: scroll, overflowY: scroll but it still doesn't work, any ideas?
<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>

Answer 1

The reason it wasn't working was because each card inside the map function didn't have a minHeight so they were just adjusting their heights to fit inside the container.
Adding both a maxHeight of 100vh to the parent container and a minHeight of 150px for each element fixed the issue