使用 `min-height` 替代 `height: fit-content` 可实现内容自适应高度与平滑过渡动画的兼顾，避免因 `fit-content` 不支持 css 过渡而导致动画失效的问题。
在 CSS 中，height: fit-content 虽能自动匹配内容高度，但它不是一个可动画的属性值——浏览器无法在 fit-content 与固定像素值（如 300px）之间插值计算过渡过程，因此 transition 会静默失效，导致悬停时高度“突变”，失去动画效果。
✅ 正确解法是：用 min-height 控制基础尺寸与展开高度。
- 初始状态设 min-height: 50px，确保最小高度，同时允许内容自然撑开容器（因 min-height 不限制上限，文本多时 div 仍会增高）；
- 悬停时将 min-height 提升至 300px，此时若内容高度不足 300px，div 会平滑扩展；若内容本身已超 300px，则保持内容实际高度（不截断），同时背景色等其他可动画属性（如 background-color、padding、opacity）仍正常过渡。
以下是优化后的完整示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid #ccc;
width: 200px;
min-height: 50px; /* ✅ 可动画、自适应、保下限 */
background-color: #0000ff;
color: white;
padding: 12px;
transition: all 0.5s ease; /* 推荐显式指定属性 + 缓动函数 */
box-sizing: border-box;
}
div:hover {
background-color: #ffcccc;
min-height: 300px; /* ✅ 同样为 min-height，可平滑过渡 */
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis.</div>
</body>
</html>⚠️ 注意事项：
- ❌ 避免混用 height（固定值）与 min-height，否则可能引发布局冲突；
- ✅ 若需更精细控制（如收起/展开折叠动画），可配合 max-height + overflow: hidden 实现（但需预估最大高度）；
- ✅ transition: all 0.5s ease 建议明确为 transition: min-height 0.5s ease, background-color 0.5s ease，提升性能与可维护性；
- ? fit-content 在 Flex/Grid 容器中作为 width/height 值时虽不可动画，但在 align-self/justify-self 等场景中仍有价值——此处仅需记住：需要过渡的高度控制，优先选 min-height 或 max-height。
通过这一模式，你既能保证内容区始终“刚刚好”包裹文字，又能让交互反馈具备专业级的流畅动画体验。
