MUI Grid子项适配容器失败且内容无法滚动问题咨询

要让Grid子项内容实现滚动，核心是给每个Grid item明确设置高度约束，并正确配置overflow属性，以下是具体调整方案：

1. 确保容器高度传递有效 #

先确认Grid容器的父元素也设置了height: 100%（或直接用height: 100vh占满视口），否则Grid容器的height:100%会因父元素高度不确定而失效。

2. 调整Grid子项样式 #

给每个Grid item添加height: 100%和overflow: auto（内容超出时自动显示滚动条），推荐用MUI的sx属性替代内联样式，更符合框架最佳实践：

import { Grid } from '@mui/material';

<Grid container direction='row' sx={{ height: '100%', overflow: 'hidden' }}>
  <Grid item xs={6} sx={{ height: '100%', overflow: 'auto', padding: 2 }}>
    .......left large content.......
  </Grid>
  <Grid item xs={6} sx={{ height: '100%', overflow: 'auto', padding: 2 }}>
    .......right large content......
  </Grid>
</Grid>

3. 可选：嵌套独立滚动容器（更灵活） #

如果子项内还有其他布局元素，可以在Grid item内部嵌套一个div作为滚动容器，精准控制滚动区域：

<Grid container direction='row' sx={{ height: '100%', overflow: 'hidden' }}>
  <Grid item xs={6} sx={{ height: '100%', padding: 2 }}>
    <div style={{ height: '100%', overflow: 'auto' }}>
      .......left large content.......
    </div>
  </Grid>
  <Grid item xs={6} sx={{ height: '100%', padding: 2 }}>
    <div style={{ height: '100%', overflow: 'auto' }}>
      .......right large content......
    </div>
  </Grid>
</Grid>

关键原理说明 #

• Grid item默认是display: block，若未明确设置高度，会被内容撑开，此时overflow属性不会生效——因为元素高度没有被限制。
• 给item设置height:100%后，它会继承容器的高度，内容超出时overflow:auto就会触发滚动。

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