Material UI v5中Grid组件设置alignItems:'stretch'不生效问题

MUI v5中Grid设置alignItems: "stretch"时高度拉伸不生效，并非属性本身失效，核心是层级样式逻辑问题：

• Grid容器设置alignItems: "stretch"后，作为flex子项的Grid item本身已经会自动拉伸占满交叉轴的最大高度，但Grid item内部嵌套的Card组件默认高度由自身内容撑开，不会自动继承父级Grid item的拉伸高度，视觉上就会呈现为高度参差不齐、拉伸无效的效果。
• 当你把alignItems设置为"flex-end"或"center"时布局看起来正常，本质是这两种对齐模式下flex子项高度会收缩为内容自身高度，对齐时不会暴露子元素未撑满父容器的问题，并非stretch属性存在功能bug。

• 最小改动方案：给所有Grid item内嵌套的Card组件添加height: 100%样式，让Card完全撑满被stretch拉伸后的Grid item高度即可。如果使用MUI的sx属性编写样式，直接在Card组件上添加sx={{ height: '100%' }}就能实现基础的等高效果。
• 进阶适配方案：如果需要适配长文本场景、同时让Card内部布局更合理（比如长文本区域自动撑开、底部操作按钮固定在Card底边），可以给Card添加纵向flex布局属性，让内容区自动填充剩余高度，参考代码如下：

<Card
  sx={{
    height: '100%',
    display: 'flex',
    flexDirection: 'column'
  }}
>
  <CardMedia
    component="img"
    height="140"
    image="your-image-path"
    alt="cover"
  />
  {/* flexGrow: 1 让内容区自动占满除媒体区、操作区外的剩余高度 */}
  <CardContent sx={{ flexGrow: 1 }}>
    {/* 任意长度的文本内容都可自动撑开，不会挤动底部按钮位置 */}
  </CardContent>
  <CardActions>
    <Button size="small">操作按钮1</Button>
    <Button size="small">操作按钮2</Button>
  </CardActions>
</Card>

• 调试技巧：如果修改后仍有高度问题，可以临时给Grid item加醒目的背景色，就能快速判断是Grid item本身未拉伸，还是内部子元素未撑满父容器，减少无效排查。

注意：排查时确认父级Grid容器没有被设置固定高度、overflow: hidden之类会干扰高度计算的属性，否则会影响stretch的高度计算基准。

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