details 的 width: 100% 常失效，根本原因是它未被当作常规流块元素处理（尤其在 flex/grid 中），或父容器宽度未定义；需根据父容器类型分别设置 flex: 1 + min-width: 0（flex 容器）或 width: 100% + box-sizing: border-box（块流），并重置 summary 的 margin 和 min-height。
details 默认是块级元素，width: 100% 看似该生效，但实际常“不随父容器缩放”——根本原因不是它不支持自适应，而是它没被当作常规流内块元素对待（尤其在 flex/grid 容器中），或父容器本身宽度未定义。
为什么 details 的 width: 100% 经常失效
常见现象：details 在 nav 或 div.menu 里横向排列时，宽度忽大忽小、内容溢出、或死活不占满父容器。
- 父容器是
display: flex，但没给details设flex: 1或min-width: 0→ 它会按内容撑宽，无视width: 100% - 父容器本身没明确宽度（比如是
inline-flex且未设width），导致子元素的100%无参照物 -
summary内有长文本或未换行内容（如 URL），触发details宽度被内部强制撑开 - 没重置
summary的默认margin和min-height，造成视觉上“卡住”或点击区域异常，间接影响布局感知
让 details 真正随父容器缩放的 CSS 写法
关键不是强行塞 width: 100%，而是确保它参与父容器的尺寸计算逻辑。
- 若父容器是普通块流：直接加
details { width: 100%; box-sizing: border-box; }即可，但必须确认父元素有明确宽度（比如max-width: 800px或width: 100%且 html/body 已重置） - 若父容器是
display: flex：给details加flex: 1; min-width: 0;——min-width: 0是重点，否则 flex 项默认min-width: auto，会阻止收缩 - 若需多
details横向并列（如菜单项）：父容器用display: flex; flex-wrap: wrap;，每个details设flex: 1 1 calc(50% - 8px);（配合 gap），避免硬写width - 移动端小屏下建议加
details summary { word-break: break-word; }，防长文本撑破容器
summary 的宽度干扰必须显式处理
summary 是 details 的第一子元素，它的渲染行为直接影响整个组件的宽度表现。它默认有 margin、min-height，且在某些浏览器中会忽略父级 width。
立即学习“前端免费学习笔记（深入）”；
- 重置
summary的外边距：details summary { margin: 0; } - 防止空
summary塌陷高度：details summary { min-height: 1.5em; padding: 0.5em 1em; } - 如果
summary内含图标或按钮，记得用display: flex; align-items: center;并设gap，避免因 inline 元素基线对齐导致宽度计算偏差 - 不要给
summary单独设width，它应完全由details的宽度约束
真正难的不是写对一行 width: 100%，而是意识到 details 的宽度表现取决于三层上下文：父容器的 display 类型、父容器自身的宽度是否可计算、以及 summary 是否悄悄破坏了盒模型。漏掉任意一层，它就会“看起来不自适应”。
