Div not scrolling when items overflow-CodePudding

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>

CodePudding user response：

The solution is to add a maxHeight property to the parent div. This will allow it to scroll when the minHeight exceeds 500.

   <div
      style={{
        minHeight: "500px",
        maxHeight: "100vh",
        width: "500px",
        backgroundColor: "gray",
        gap: "10px",
        display: "flex",
        flexDirection: "column",
        overflowY: "scroll",
      }}
    >...</div>

CodePudding user response：

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