通过 min-height 替代 height: fit-content，既能使容器随文本自然撑开，又能在 hover 时平滑过渡到目标尺寸，完美兼顾自适应与动效。
在 CSS 中，height: fit-content 虽能实现内容驱动的高度自适应，但它不支持 CSS transition 动画——因为 fit-content 是一个计算值（intrinsic size），而非可插值的长度单位（如 px、em），浏览器无法在“无固定高度”和“固定高度”之间生成中间帧，导致过渡失效。
✅ 正确解法是：用 min-height 控制基础高度范围，配合 transition 实现流畅动画。
- 初始状态设 min-height: 50px，确保内容少时有最小高度，内容多时自动扩展；
- Hover 状态提升 min-height: 300px，浏览器即可对 min-height 属性进行插值过渡（它属于可动画的 CSS 属性）；
- 同时移除 height 声明，让元素保持由内容决定的实际高度（height: auto 默认行为）。
以下是优化后的完整示例：
<!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; /* 推荐显式写 all 或指定属性 */
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 在同一过渡中（如 height: auto → height: 300px），auto 不可动画；
- ✅ 若需更精细控制（如收起/展开效果），可结合 max-height + overflow: hidden（需预估最大高度，例如 max-height: 0; → max-height: 500px;）；
- ✅ min-height 和 max-height 是目前最可靠、语义清晰且广泛兼容的方案（支持所有现代浏览器及 IE10+）；
- ? 动画性能提示：为保障流畅性，建议仅对 transform、opacity、min-height 等合成器友好的属性做过渡；避免触发重排（reflow）。
总结：fit-content 是布局利器，但不是动画伙伴；而 min-height 在保持内容自适应的同时，赋予了 CSS 过渡以确定性与可预测性——这是构建响应式、交互动效友好界面的关键权衡。
