本文介绍一种规避 dom 流式布局限制的实用方案：通过为容器设置 `max-height` 和 `overflow-y: scroll`，配合 `scrollintoview({ block: “end” })` 实现“向上展开”视觉效果，避免影响下方元素，同时支持动态内容高度。
在构建可折叠（collapsible）列表组件时，一个常见但易被误解的需求是：“点击某一项展开时，希望它向上生长，推高上方元素，而下方元素保持不动”。然而，从 CSS 流式布局（normal flow）的本质出发，这是无法原生实现的——因为块级元素只能向下扩展其后续兄弟元素的位置，浏览器渲染引擎不会向上重排已渲染的前序节点。
直接尝试 position: absolute 或 transform: translateY() 等方案均会脱离文档流，导致上方元素无法响应式位移；而单纯切换 display: none / display: unset 则默认引发向下的布局重排，违背“仅影响上方”的要求。
✅ 正确解法：放弃“物理上推高上方元素”，转而采用“视觉上聚焦目标区域”的用户体验策略。核心思路如下：
- 将整个列表包裹在一个固定高度、可垂直滚动的容器中（如 max-height: 80px; overflow-y: scroll）；
- 展开某项时，不改变 DOM 顺序或高度方向，而是调用 element.scrollIntoView() 并指定 block: “end” —— 这会让目标
的底部对齐容器底部，从而营造出“向上展开、顶部内容被顶起”的直观效果； - 因为容器高度受限，滚动行为天然抑制了对下方外部元素的影响，完美满足“下方不动”的约束。
以下是优化后的 JavaScript 实现（兼容 React 中的逻辑复用）：
