details元素不响应min-height/max-height，需在子容器（如.details-content）上设置；展开时用min-height+padding保底高度，max-height+overflow-y:auto实现滚动；动画需JS配合maxHeight动态计算并避免display:none中断过渡。
details标签本身不能直接设min-height或max-height
浏览器对 details 元素的渲染逻辑决定了它不响应 min-height 或 max-height——这些样式会被忽略，因为 details 是一个「替换元素变体」，其高度由内部 summary 和展开/收起的内容区共同动态决定。
真正可控的是它的子容器：你必须把内容包裹进一个明确的块级元素（比如 <div class="details-content">），然后在这层上设置高度约束。
-
min-height可以加在内容容器上，但仅对「已展开」状态生效；收起时该容器被display: none（或类似机制）隐藏，高度归零 -
max-height必须配合overflow: auto才能出现滚动条，且只在内容超出时触发，不是强制裁剪 - 不要给
details或summary直接写height，会破坏点击热区或导致 Safari 点不中
想让展开区域有最小视觉高度？用padding + min-height组合
常见需求是：即使内容为空，展开后也保留一段空白区域，避免 UI 塌陷。这不是靠 details 本身，而是靠内容容器的内边距与最小高度协同实现。
- 给内容容器（如
.details-content）设padding: 16px，确保有基础呼吸感 - 再加
min-height: 48px，这样空内容时也能撑开至少一行高度 - 如果内容含文字，建议同时设
line-height: 1.5和font-size: 14px，避免因行高塌缩导致实际高度低于预期 - 注意：Safari 对
min-height在 flex 子项中的表现不稳定，若容器用了display: flex，优先改用height: min(48px, fit-content)（Chrome 115+ / Safari 17.4+ 支持）
限制展开区域最大高度并启用滚动？必须用max-height + overflow
max-height 在 details 展开动画中是个关键瓶颈——它无法过渡 auto，也不能用 fit-content，只能填固定像素值。
立即学习“前端免费学习笔记（深入）”；
- 给内容容器设
max-height: 300px+overflow-y: auto，这是最稳妥的写法 - 若内容高度动态（比如含图片、异步加载文本），需 JS 测量：
el.style.maxHeight = el.scrollHeight + 'px'，再触发动画 - 避免写
max-height: none或max-height: 100%，前者会让 transition 失效，后者在多数浏览器中等价于none - 滚动条默认会占据宽度，影响布局；可加
overflow-y: overlay（仅 Safari 支持）或用自定义滚动条 CSS 覆盖
手风琴效果下高度控制更复杂
多个 details 实现单开单关时，关闭项的内容容器要快速收起，但不能靠 display: none——否则 max-height 动画会中断。
- JS 关闭其他项时，先移除
open属性，再同步设el.style.maxHeight = '0'，最后加overflow: hidden - 重开时，先设
maxHeight: '0'+overflow: hidden，强制重排，再用setTimeout异步设为scrollHeight，触发过渡 - 别依赖
:not(:open) .details-content这类选择器设max-height: 0，CSS 无法监听 toggle 事件，会导致状态不同步 - 移动端 iOS Safari 对
max-height过渡帧率敏感，建议搭配opacity淡入淡出，降低视觉卡顿感
details 的原生控制未完全开放，所有高度干预都得绕过 summary 渲染、补全动画时机、适配 Safari 的特殊限制——漏掉任意一环，就可能点不中、动不了、滚不出。 
