details在flex垂直布局中“掉行”是因为其默认display: block会独占整行宽度，破坏column对齐；需显式设display: block或flex，并重置summary{margin:0}以确保垂直堆叠。
details在Flex垂直布局里为什么总“掉行”
因为 <details></details> 默认是 display: block，放进 flex-direction: column 容器后，它仍会按块级行为强行占满整行宽度，导致视觉上“撑开”父容器、破坏垂直对齐节奏。这不是 bug，是浏览器 UA 样式与 Flex 交互的默认表现。
常见现象：多个 <details></details> 套在 <div class="tabs-vertical"> 里，本想上下堆叠成侧边菜单，结果每个都横着铺满、间距失控。
<ul>
<li>必须显式重置 <code><details></details> 的 display：设为 display: block（保持语义）或 display: flex（若需内部对齐）——但别用 inline-block，它在 column 容器中可能触发基线对齐偏移
<summary></summary> 的 margin-bottom 是罪魁之一，Chrome/Firefox 默认给它加了 1em，在垂直菜单里直接把下一项往下顶；清掉：summary { margin: 0; }
flex-direction: column 且 justify-content: center，单个 <details></details> 高度不固定时，整个列表会“浮”在中间——加 align-items: flex-start 更可控如何让details在vertical tab中真正垂直堆叠
垂直标签页本质是导航列 + 内容区分离，<details></details> 适合当导航项，但不能只靠它自己撑起结构。
- 外层容器设
display: flex，再分左右两区：左侧nav区固定宽，右侧main区flex: 1 - 左侧
nav内部再设display: flex; flex-direction: column，把每个<details></details>当子项放进去 - 每个
<details></details>加width: 100%和box-sizing: border-box，避免 border/padding 撑破列宽 -
<summary></summary>必须设padding: 0.5rem 1rem或min-height: 2.5rem，否则真机触控热区太小，尤其 iOS 微信 WebView 下容易点不中
flex-direction: column 下 details展开内容高度塌陷怎么办
展开后内容区域高度为 0，或者只显示第一行，基本是父容器没给弹性空间，或者 <details></details> 子元素没继承高度。
- 确保
<details></details>的直接父容器有明确高度来源：要么设height: 100dvh，要么上级链路中至少一处用了flex: 1 - 展开内容（即
<details></details>内除<summary></summary>外的部分）不要设height: 0或overflow: hidden—— 浏览器靠自然流高计算展开动画，硬限高会卡住 - Safari 对
details[open] > *的 height 过渡支持弱，别依赖max-height动画；改用opacity+transform: scaleY()更稳 - 如果内容区含图片或异步加载文本，加
details[open] { min-height: var(--details-open-min-height, 6rem); }防止闪动
writing-mode 和 details 能不能一起用
能，但仅限文字方向，不影响折叠逻辑；而且要小心 <summary></summary> 的排版断裂。
- 给
<summary></summary>单独加writing-mode: vertical-rl是安全的，中文竖排阅读体验好 - 别给整个
<details></details>设writing-mode，否则内部展开内容也会被强制竖排，语义错乱 - 竖排后
<summary></summary>的line-height要调大（建议 ≥ 1.8），否则字挨太近；同时补text-orientation: upright让英文字母直立 - 注意：iOS Safari 对
writing-mode+details的组合渲染有延迟，首次点击可能闪一下才转正，加transform: translateZ(0)可触发硬件加速缓解
details 本身，而在它嵌套的层级是否每一步都声明了高度来源、display 类型和盒模型控制——漏掉任意一环，垂直排版就会静默失效。
