details标签不支持max-height动画，需用JavaScript监听toggle事件，通过强制重排实现展开/收起过渡；内容区设max-height和overflow-y:auto以限高可滚动；summary箭头需用[open]状态+transform控制，并隐藏原生marker。
details 标签本身不支持 max-height 动画
直接给 <details> 或其内容区加 max-height: 300px; transition: max-height 0.3s 完全无效——因为原生 open 属性切换不触发 height 相关 CSS 属性变化，浏览器不会对未声明初始 max-height 的元素做插值过渡。你看到的“无动画展开”不是 bug，是机制使然。
用 JavaScript + max-height 模拟可滚动的限高展开区
核心思路是：监听 toggle 事件，手动控制内容区的 max-height，并强制重排（reflow）让过渡生效。关键约束条件包括：
- 内容区必须是
<details>下第一个非<summary>子元素（如<div>），且设overflow: hidden - 展开时先设
max-height: 0，再读取offsetHeight强制重排，再设为scrollHeight - 收起时反向：先设
max-height为目标高度，再重排，再设回0 - Safari 中若
scrollHeight返回0（常见于含图片时），可补一句getComputedStyle(content).height触发布局刷新
示例片段：
const details = document.querySelector('details');
const content = details.querySelector(':scope > *:not(summary)');
details.addEventListener('toggle', () => {
if (details.open) {
content.style.maxHeight = '0';
content.offsetHeight;
content.style.maxHeight = content.scrollHeight + 'px';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
content.offsetHeight;
content.style.maxHeight = '0';
}
});
限制最大高度的同时保留滚动能力
当内容实际高度超过预期上限（比如 200px），你不想让它撑开页面，但又希望用户能完整阅读——这时不能只靠 max-height，必须配合 overflow-y: auto：
立即学习“前端免费学习笔记（深入）”；
-
max-height必须设在**内容区容器**上（即上面那个content元素），不是<details>根元素 - 内容区需显式设
overflow-y: auto，否则超出部分会被裁剪且不可滚动 - 避免在 flex 容器中直接对
<details>设max-height：flex item 默认拉伸，会干扰max-height生效，建议把内容区单独提一层 flex item
箭头旋转与样式清理的细节陷阱
<summary> 的折叠图标翻转要绑定 open 状态，不能只靠 hover：
- 用
details[open] summary { transform: rotate(90deg); }控制方向 - 必须加
transition: transform 0.2s ease，且确保<summary>是 inline 元素（默认就是） - 想隐藏原生小三角，得同时写
summary { list-style: none; }和summary::marker { display: none; }；但注意::marker在 Safari 15.4 以下不支持，降级方案是用伪元素覆盖
scrollHeight 计算不准是常态——字体加载延迟、行高未生效、内联样式未 flush 都会导致值偏小，动画卡住或收不严。真要稳定，得在 DOMContentLoaded 后等一帧，或监听 load 事件处理图片。
