MaterialUI：如何将网格项高度限制为其他网格项的最大高度？

我正尝试创建一个包含4个网格项的Grid组件。第四个网格项比其余项更高，因此主导了整个网格的高度。是否有办法将第四个网格项（<h4>）的高度限制为第一个网格项（<h1>）的高度，使得h4 = Grid高度 = h1？

对应的代码示例：

<Grid container xs={12} spacing={4}>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3}>
        {/* long item */}
    </Grid>
</Grid>

解决方案 #

方法1：CSS高度限制+溢出处理 #

通过设置Grid容器高度自适应最短项，再让所有子项填满容器高度，最后控制长内容项的溢出：

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

const gridContainerStyle = {
  height: 'fit-content',
};

const gridItemStyle = {
  height: '100%',
};

const longItemStyle = {
  overflow: 'auto', // 可选：overflow: 'hidden' 直接截断内容
};

<Grid container xs={12} spacing={4} sx={gridContainerStyle}>
    <Grid xs={3} sx={gridItemStyle}>
        {/* short item */}
    </Grid>
    <Grid xs={3} sx={gridItemStyle}>
        {/* short item */}
    </Grid>
    <Grid xs={3} sx={gridItemStyle}>
        {/* short item */}
    </Grid>
    <Grid xs={3} sx={{ ...gridItemStyle, ...longItemStyle }}>
        {/* long item */}
    </Grid>
</Grid>

方法2：用MUI Box包裹长内容 #

借助Box组件约束长内容的高度，实现更清晰的结构：

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

<Grid container xs={12} spacing={4} sx={{ height: 'fit-content' }}>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3}>
        {/* short item */}
    </Grid>
    <Grid xs={3} sx={{ height: '100%' }}>
        <Box sx={{ height: '100%', overflow: 'auto' }}>
            {/* long item */}
        </Box>
    </Grid>
</Grid>

核心逻辑 #

• height: fit-content让Grid容器高度由最短子项决定，避免被最长项撑高；
• 所有Grid子项设置height: 100%，确保高度与容器一致；
• 长内容项通过overflow属性控制超出部分的显示，保证高度不超过容器。

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