MUI Grid实现隐藏滚动条却无法滚动，请求排查代码问题

你的实现存在两个核心问题，导致滚动条隐藏后无法滚动：

1. 子Grid高度超出容器被裁切：子Grid设置了height:100%和margin:10px，再加上boxSizing:content-box，实际高度是容器高度+20px（上下margin），而容器的overflow:hidden直接把超出部分（包括可滚动的内容区域）裁掉了，滚动功能自然失效。
2. 未正确实现“隐藏滚动条但保留滚动”的样式：仅靠容器的overflow:hidden隐藏滚动条，同时也阻断了子元素的滚动区域。

修正方案一：抵消margin对高度的影响 #

通过calc()计算子Grid高度，抵消上下margin的总长度，同时添加跨浏览器的隐藏滚动条样式：

const ScrollableGrid: React.FC = () => {
  return (
    <Grid
      container
      sx={{ overflow: "hidden", maxHeight: "300px", border: "1px solid green" }}
    >
      <Grid
        item
        xs={12}
        sx={{
          overflowY: "auto",
          // 用calc抵消上下margin的20px，避免高度超出容器
          height: "calc(100% - 20px)",
          boxSizing: "content-box",
          border: "1px solid red",
          margin: "10px",
          // 跨浏览器隐藏滚动条但保留滚动功能
          scrollbarWidth: "none", // Firefox
          "-ms-overflow-style": "none", // IE/Edge
          "&::-webkit-scrollbar": {
            display: "none" // Chrome/Safari等WebKit内核浏览器
          }
        }}
      >
        <div>Text 1</div>
        <br />
        <div>Text 2</div>
        <br />
        <div>Text 3</div>
        <br />
        <div>Text 4</div>
        <br />
        <div>Text 5</div>
        <br />
        <div>Text 6</div>
        <br />
        <div>Text 7</div>
        <br />
        <div>Text 8</div>
        <br />
        <div>Text 9</div>
        <br />
        <div>Text 10</div>
        <br />
        <div>Text 11</div>
        <br />
        <div>Text 12</div>
        <br />
      </Grid>
    </Grid>
  );
};

修正方案二：用padding替代margin（更简洁） #

把margin换成padding，同时设置boxSizing:border-box让padding包含在高度内，避免高度溢出：

const ScrollableGrid: React.FC = () => {
  return (
    <Grid
      container
      sx={{ overflow: "hidden", maxHeight: "300px", border: "1px solid green" }}
    >
      <Grid
        item
        xs={12}
        sx={{
          overflowY: "auto",
          height: "100%",
          boxSizing: "border-box", // 让padding计入高度，避免溢出
          border: "1px solid red",
          padding: "10px", // 用padding替代margin实现间距
          // 跨浏览器隐藏滚动条样式
          scrollbarWidth: "none",
          "-ms-overflow-style": "none",
          "&::-webkit-scrollbar": {
            display: "none"
          }
        }}
      >
        <div>Text 1</div>
        <br />
        <div>Text 2</div>
        <br />
        <div>Text 3</div>
        <br />
        <div>Text 4</div>
        <br />
        <div>Text 5</div>
        <br />
        <div>Text 6</div>
        <br />
        <div>Text 7</div>
        <br />
        <div>Text 8</div>
        <br />
        <div>Text 9</div>
        <br />
        <div>Text 10</div>
        <br />
        <div>Text 11</div>
        <br />
        <div>Text 12</div>
        <br />
      </Grid>
    </Grid>
  );
};

内容的提问来源于stack exchange，提问作者spoons