如何让MUI Modal中Grid内的按钮对齐到底部？

问题出在两个关键点上：第二个Grid Item未设置为Flex容器，以及父容器高度未正确传递，导致height='100%'和justifyContent='space-between'无法生效。以下是修正方案：

步骤1：修正Modal容器样式 #

确保容器高度完全占满，同时修正颜色值的拼写错误：

const styles = {
    modalBox: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        minHeight: '55%',
        maxHeight: '80%',
        maxWidth: '600px',
        bgcolor: '#fff', // 修正为正确的白色值
        height: '100%', // 让容器高度完全占满可用空间
        overflow: 'hidden', // 避免内容溢出容器
    },
}

步骤2：调整Grid布局结构 #

将包含列表和按钮的Grid Item设置为Flex容器，同时确保高度继承：

<Modal
  ...
>
    <Grid container sx={styles.modalBox} spacing={1} direction='column' height='100%'>
        <Grid item xs={12}>
            <Typography variant="h5">
                List Title
            </Typography>
        </Grid>
        <Grid item xs={12} sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            height: '100%',
            paddingBottom: 2, // 给按钮底部留间距
        }}>
            <List sx={{ overflowY: 'auto', flexGrow: 1 }}> {/* 列表内容过多时可滚动 */}
                <ListItem>one</ListItem>
                <ListItem>two</ListItem>
                <ListItem>three</ListItem>
            </List>
            <Button variant="contained">
                Create New List
            </Button>
        </Grid>
    </Grid>
</Modal>

关键修正说明 #

1. Flex容器转换：第二个Grid Item必须设置display: 'flex'和flexDirection: 'column'，才能让justifyContent='space-between'生效，实现列表在上、按钮在下的垂直分布。
2. 高度传递：父Grid Container设置height='100%'，子Item的height='100%'才能继承到正确的高度空间。
3. 列表滚动处理：给List添加overflowY: 'auto'和flexGrow: 1，确保列表内容过多时自动滚动，同时不挤压按钮的位置。

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