MUI DataGrid 6行数过多时高度超出父容器，窗口滚动问题咨询

核心原因 #

MUI DataGrid v6 和 Grid v5 的默认布局逻辑完全不同：

• Grid v5 组件默认会继承父容器的高度限制，当内容超出时自动启用 overflow: auto 生成内部滚动条。
• DataGrid v6 则默认采用内容驱动的高度计算——表格高度会完全适配所有行的总高度，不会主动限制自身高度，数据量较大时就会直接撑高父容器甚至整个窗口。

具体差异点 #

• 高度默认值：Grid v5 默认隐含 height: 100% 或继承父级高度约束，配合溢出规则实现内部滚动；DataGrid v6 的 height 属性默认是 undefined，不会强制限制高度。
• 容器约束依赖：Grid v5 会自动识别父容器的高度限制并应用滚动逻辑；DataGrid v6 需要你手动给表格（或其父容器）设置明确的高度，才会触发内部滚动。

解决方法 #

要让 DataGrid v6 像 Grid v5 一样内部滚动，只需给表格设置明确的高度限制即可：

1. 设置固定高度

<DataGrid
  rows={yourRowsData}
  columns={yourColumnsConfig}
  height={600} // 固定高度，超出后内部滚动
/>

2. 继承父容器高度（需父容器有明确高度）

{/* 父容器先设置高度 */}
<div style={{ height: '80vh', width: '100%' }}>
  <DataGrid
    rows={yourRowsData}
    columns={yourColumnsConfig}
    height="100%"
  />
</div>

3. 设置最大高度
   如果希望表格在内容较少时自适应高度，内容过多时才滚动，可以用 maxHeight：

<DataGrid
  rows={yourRowsData}
  columns={yourColumnsConfig}
  maxHeight={700}
/>

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