details在固定高度容器中不显示滚动条，根本原因是父容器未显式设置overflow-y: auto；需避免直接限制details高度，改用包裹层控制内容区滚动，并注意pointer-events、盒模型及WebView兼容性问题。
details在固定高度容器里不显示滚动条？先检查 overflow 和 height 冲突
固定高度容器（如 height: 300px）套 details 时，展开后内容被裁剪、滚动条不出现——根本原因不是 details 本身有问题，而是父容器的 overflow 未显式启用，或被 height + overflow: hidden 锁死。
浏览器对 details 的原生展开逻辑不触发父容器的溢出重排，除非你明确告诉它“允许滚动”：
-
details自身不产生滚动条，滚动行为完全由其**父容器**控制 - 若父容器设了
height: 300px，必须同时设overflow-y: auto（不能只靠overflow: hidden或留空） - 避免给
details直接加height或max-height：这会干扰原生 open/close 状态切换，导致toggle事件失效、键盘（Space/Enter）无法操作 - 移动端 WebView（如微信 WKWebView）中，若仍不滚动，临时加
-webkit-overflow-scrolling: touch提升响应性
展开后内容被截断，但滚动条出现位置不对？注意内部 padding 和 border 影响
即使父容器启用了 overflow-y: auto，details 展开后底部内容仍被切掉——大概率是 summary 或内容区的 padding/border 挤占了可用空间，而 height 是硬限制，不自动为内边距腾地方。
解决方法不是调大父容器高度，而是用盒模型让空间计算更可控：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
box-sizing: border-box（推荐全局设置，避免遗漏） - 确认
details子元素（尤其是summary）没有意外的margin-bottom或padding-bottom向下撑出容器 - 如果内容区有图片或动态加载项，
scrollHeight可能读取不准，需在details:toggle事件后加requestAnimationFrame延迟读取 - 真机测试时，iOS Safari 对
details+overflow组合存在渲染延迟，可加transform: translateZ(0)强制硬件加速（仅当必要时）
想让 details 展开区域自带滚动，而不是整个容器滚动？别用 overflow-y
常见需求是：只让 details 内部内容区（非 summary）可滚动，且滚动条紧贴在展开面板底部。这时不能把 overflow 加在父容器上，而要精确控制内容区。
标准 DOM 结构下，details 的内容是匿名子节点，无法直接加 class；可靠做法是包裹一层 <div class="details-content">：
<details>
<summary>点击展开</summary>
<div class="details-content">
<p>长内容…</p>
</div>
</details>
再配 CSS：
.details-content { max-height: 200px; overflow-y: auto; }- 去掉
details上所有 height/max-height 设置，让它自然撑高 - 为兼容 Safari，
.details-content需加display: block（部分版本默认为 inline） - 若内容含图片，首次加载时
max-height可能过小，建议用 JS 在img.onload后重设max-height为scrollHeight
微信/钉钉等 WebView 中 summary 点击无反应？优先排查 pointer-events
在 iOS 微信（WKWebView）、Android 钉钉（UAP）中，details 的 summary 点击失灵，最常踩的坑是父级或自身被意外设置了 pointer-events: none，或被 transform、opacity: 0.99 等属性干扰了事件捕获。
快速定位方式：
- 打开真机调试（Safari Web Inspector / Chrome DevTools），选中
summary元素，看 Computed 样式中pointer-events是否为none - 检查
summary父元素是否用了transform: translateZ(0)或will-change: transform，这些可能创建新层叠上下文，遮挡点击 - Android X5 内核（QQ 浏览器）下，
summary需显式加touch-action: manipulation才响应轻触 - 不要用
label包裹summary——语义冲突，会导致双击或 focus 异常
details 的行为边界比看起来更窄。真正稳定的做法，是把“滚动控制权”从浏览器原生机制里收回来一点：用包裹层接管内容区滚动，用事件监听代替样式依赖，用真机验证代替模拟器判断。 
