通过将父容器设为 Flex 布局并隐藏其滚动条，再利用 flex-grow: 1 让子容器自动占据剩余垂直空间，即可实现父容器无滚动、子容器独立纵向滚动的布局效果。
通过将父容器设为 flex 布局并隐藏其滚动条，再利用 `flex-grow: 1` 让子容器自动占据剩余垂直空间，即可实现父容器无滚动、子容器独立纵向滚动的布局效果。
在实际 React 组件开发中，常遇到无法修改外部父容器样式（如第三方 UI 库组件或遗留代码），但又需在特定场景下将滚动行为“下放”至内部子容器的需求。核心思路是：绕过 overflow: auto 的默认流式占位逻辑，改用 Flex 布局实现空间分配与滚动解耦。
具体实现步骤如下：
- 禁用父容器自身滚动：将 overflow: auto 改为 overflow: hidden，彻底阻止其生成滚动条；
- 启用 Flex 布局：在父容器上添加 display: flex; flex-direction: column，使其子元素按垂直方向排列；
- 设定父容器显式高度（关键）：Flex 布局中，flex-grow 要生效，父容器必须有明确的高度约束（如 height: 100vh、height: 300px 或 min-height + 容器上下文高度限制）；
-
让子容器弹性撑满剩余空间：对目标子容器（#child）设置 flex-grow: 1，它将自动填充除
等兄弟元素外的所有可用垂直空间；
- 启用子容器纵向滚动：设置 overflow-y: auto（或 scroll）并确保其内容高度超过自身可渲染高度。
✅ 示例代码（含响应式建议）：
<div id="parent"
style="
overflow: hidden;
display: flex;
flex-direction: column;
height: 100vh; /* 推荐使用视口单位或继承自上下文的高度 */
max-height: 100vh;
">
<h1 style="margin: 0; padding: 16px;">Hello world</h1>
<div id="child"
style="
overflow-y: auto;
flex-grow: 1;
min-height: 0; /* 关键：防止 flex item 最小高度干扰滚动 */
">
<div style="height: 1200px; background-color: #d4edda;"></div>
</div>
</div>⚠️ 注意事项：
- min-height: 0 是重要补充——当子容器内嵌复杂内容（如表格、多层嵌套）时，浏览器可能默认赋予最小高度，导致 flex-grow 失效或滚动异常，显式重置可规避该问题；
- 若父容器高度依赖于动态内容（如侧边栏+主内容区），建议用 CSS Grid 或 calc() 配合 vh 单位，或在 React 中结合 useEffect + ResizeObserver 动态更新高度；
- 在 React 中，推荐将该逻辑封装为自定义 Hook（如 useScrollableChild）或高阶组件，提升复用性与可维护性。
此方案无需 JavaScript 计算高度、不依赖固定像素值（除父容器总高外），语义清晰、兼容性好（支持所有现代浏览器及 IE11+），是解决“滚动权下放”类布局问题的稳健实践。
