MUI中如何实现Card/div高度随展开内容自动适配

核心问题诱因 #

给Card设置固定硬编码height值后，组件高度被锁死，内部展开内容的总高度超过固定值时，就会溢出Card边界。如果同时给内部展开容器加了绝对定位，会进一步加剧父容器无法感知内容高度的问题。

具体调整步骤 #

• 替换Card的固定高度配置
  删掉Card组件sx属性或者自定义样式中写死的height: xxx px配置，如果需要保留未展开状态下的卡片基础高度，改用minHeight属性设置最小高度即可，内容超出最小高度时Card会自动向下撑开。
  错误写法示例：

  // 固定高度会锁死卡片尺寸，直接删掉height配置
  <Card sx={{ height: 400, width: 350 }} />
  

  正确写法示例：

  // 用minHeight设置基础高度，自适应内容变化
  <Card sx={{ minHeight: 200, width: 350 }} />
  

• 修正展开内容的定位属性
  不要给展开内容的外层容器设置position: absolute，绝对定位会让元素脱离标准文档流，父级Card无法感知它的高度变化，自然无法自动适配高度。保持展开内容在正常文档流中即可。
• 校验布局容器的影响
  如果Card放在Flex、Grid布局容器中，给Card额外添加height: fit-content属性，避免父布局的拉伸规则强制Card高度固定，导致自适应失效。

展开动画最佳实践 #

不要手动控制展开区域的height值做动画，直接使用MUI官方提供的Collapse组件包裹需要展开/收起的内容，组件会自动计算内部内容高度，实现平滑过渡效果，父级Card会同步跟随高度变化自动适配，不会出现内容溢出问题。
可直接复用的代码示例：

import { useState } from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Collapse from '@mui/material/Collapse';

export default function DemoCard() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Card sx={{ minHeight: 200, width: 350, m: 2, height: 'fit-content' }}>
      <CardContent>
        <Button 
          variant="contained" 
          onClick={() => setExpanded(prev => !prev)}
        >
          {expanded ? '收起内容' : '展开内容'}
        </Button>
        <Collapse in={expanded}>
          <div style={{ paddingTop: 16 }}>
            {/* 任意长度的展开内容都可以放在这里，不会溢出Card边界 */}
            示例长文本、列表、表单模块都支持，Card高度会随内容自动适配
          </div>
        </Collapse>
      </CardContent>
    </Card>
  );
}

避坑提示：如果不需要做特殊的内容裁切，不要给Card设置overflow: hidden，否则超出的内容会被直接截断无法显示；移除固定高度后保持默认的overflow属性即可，Card会自动包裹所有子内容。

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