max-height 无法从 0 过渡到 auto 是因 CSS 无法对 auto 插值计算，导致动画跳变；absolute 定位使高度失控；唯有 JS 获取 scrollHeight 并设为具体 px 值才能实现真实高度过渡。
因为 max-height 无法从 0 过渡到 auto，而强行用固定值替代又脱离内容真实高度——这不是定位问题，是 CSS 动画机制与布局计算的根本冲突。
为什么 max-height: 0 → auto 会失效
浏览器不能对 auto 做插值运算，transition 直接跳变。你看到的“展开”，其实是瞬间显示，没有动画过程；收起时也可能残留高度或裁切内容。
-
auto不是数值，CSS 引擎无法计算中间帧 - 即使设了
transition: max-height 0.3s，浏览器也只在0和某个估算值之间硬凑，结果忽快忽慢 - 某些情况下（如 Safari）会退化为
visibility切换，完全无过渡
用 position: absolute 更会让高度彻底失控
一旦给折叠内容容器加 position: absolute，它就脱离文档流，父容器高度恒为 0，max-height 失去参照，动画和布局同时崩坏。
- 内容可能闪现在左上角（
absolute默认定位点） - 父容器无法感知子元素高度变化，导致后续元素重叠或错位
- 就算加了
overflow: hidden，也只裁剪内容，不修复高度计算逻辑
真正能响应内容高度的只有 JS + scrollHeight
纯 CSS 没法读取运行时内容高度，必须靠 JS 获取真实 scrollHeight，再设为具体 px 值参与过渡。
立即学习“前端免费学习笔记（深入）”；
- 先设
el.style.height = '0'，再执行el.offsetHeight强制重排，再设目标高度，否则动画不触发 - 收起后建议清空
height内联样式（设为''），避免影响下一次展开 - 注意子页
body的默认margin/padding，它们会多算进scrollHeight，需提前归零
最常被忽略的一点：动画是否“丝滑”，不取决于 transition 写得多华丽，而在于 height 值是否真的匹配内容——写死 500px 或依赖 auto 都是自欺欺人，scrollHeight 才是唯一可信的源头。
