Grid组件垂直尺寸控制：实现内部长List自适应滚动且不干扰其他布局

你的问题核心是MUI垂直Grid（本质为flex列布局）的高度分配规则和溢出限制未正确配置，按以下步骤修改即可：

1. 先给垂直方向的Grid容器添加明确高度基准，需要保证该容器的父级也有确定高度，如果是页面级布局可直接设为100vh，示例中给列容器加sx={{ height: '100%', minHeight: 0 }}
2. 上下两个Card所在的Grid item设置flexShrink: 0，禁止被内容挤压变形
3. 中间List所在的Grid item设置flexGrow: 1自动占满剩余高度，同时加minHeight: 0打破flex子项默认内容最小高度限制，避免内容过长撑开容器
4. List组件添加height: '100%'，保证填满父Grid item的空间，溢出时触发滚动

修改后完整代码如下：

return (
    <Grid container spacing={0}>
        <Grid item xs={2} sx={{ height: '100%' }}>
            {/* 垂直列Grid容器，必须有确定高度 */}
            <Grid container spacing={2} direction='column' sx={{ height: '100%' }}>
                <Grid item sx={{ flexShrink: 0 }}>
                    <Card>
                        ABCD
                    </Card>
                </Grid>
                {/* 中间可滚动区域配置 */}
                <Grid item sx={{ flexGrow: 1, minHeight: 0 }}>
                    <List sx={{ height: '100%', overflowY: 'auto' }}>
                        {displayRows()}
                    </List>
                </Grid>
                <Grid item sx={{ flexShrink: 0 }}>
                    <Card>
                        IJKL
                    </Card>
                </Grid>
            </Grid>
        </Grid>
        <Divider orientation='vertical' flexItem/>
    </Grid>
);

关键配置说明 #

• 外层所有父容器必须有明确高度，否则flex的高度分配没有基准，无法生效
• minHeight: 0是解决长内容挤压其他组件的核心属性，flex布局默认子项最小高度等于内容高度，设置为0后会强制遵守父容器分配的高度
• flexGrow: 1保证中间区域在内容较少时自动拉伸，填满上下Card之间的所有空间

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