项目溢出时 Div 不滚动答案

【问题标题】：Div not scrolling when items overflow项目溢出时 Div 不滚动
【发布时间】：2023-01-22 07:01:18
【问题描述】：

我有以下使用 Mui Modal 的模态代码。

一切正常，除非我将更多商品添加到购物车。当发生这种情况并且 minHeight 超过 500 时，它会继续到 100vh 然后停止并只显示 5 件商品，即使购物车中的商品远远超过 5 件也是如此。

我给父 div overflow: auto, overflow: scroll, overflowY: scroll 但它仍然不起作用，有什么想法吗？

<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={{
                  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>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

解决方法是在父级 div 中添加一个 maxHeight 属性。这将允许它在 minHeight 超过 500 时滚动。

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

【讨论】：