在 Flex 布局中，当向 sec1 内的子容器动态添加内容时，若未正确传递高度约束，父容器会随内容增长而撑高，破坏整体等比分割结构；解决关键在于显式继承高度链并为滚动区设置 min-height: 0。
在 flex 布局中，当向 `sec1` 内的子容器动态添加内容时，若未正确传递高度约束，父容器会随内容增长而撑高，破坏整体等比分割结构；解决关键在于显式继承高度链并为滚动区设置 `min-height: 0`。
要实现「sec1、sec2、sec3 按比例固定占据视口，且仅在内部滚动区域（如 .containerWithScroll）发生垂直滚动」的效果，核心不是限制内容数量，而是确保高度约束能逐层向下透传。Flex 容器（如 .sec1）通过 flex: 1 获得了由 .main_container 分配的高度，但该高度默认不会自动继承给子元素——除非显式声明 height: 100% 或使用 Flex 嵌套。
✅ 正确做法：构建可继承的高度链 + 强制收缩滚动容器
首先，为 .sec1_2 添加 height: 100%，使其严格继承 .sec1 的分配高度：
.sec1_2 {
width: 100%;
height: 100%; /* 关键：承接父级 flex 分配的高度 */
}
接着，将内部结构重构为一个 flex column 容器，并精确控制各部分行为：
- Header 区域：使用 flex: 0 0 auto（不伸缩、不收缩，仅按内容高度）
- 滚动区域：使用 flex: 1 1 auto 并必须添加 min-height: 0 —— 这是防止其突破父容器边界的关键（否则 Flex 项默认最小高度为内容高度，导致撑开）
<div style="background:blue;display:flex;flex-direction:column;height:100%;width:100%">
<!-- Header：固定高度，不参与伸缩 -->
<div style="background: blue;flex: 0 0 auto">
<div style="display:flex;flex-direction:column;height:100%;width:100%">
<h1>header</h1>
</div>
</div>
<!-- 滚动区：弹性填充剩余空间，且允许内容溢出滚动 -->
<div style="background:lightblue;flex: 1 1 auto; min-height: 0">
<div class="containerWithScroll" style="background: green; display:flex; flex-direction: column; height:100%">
<div style="overflow-y: auto; overflow-x: hidden; height:100%; width:100%">
<!-- 可无限添加 100，仅触发内部滚动 -->
<div>100</div>
<div>100</div>
<div>100</div>
<!-- ... 更多内容 -->
</div>
</div>
</div>
</div>
⚠️ 注意事项
- min-height: 0 是解决“滚动区撑高父容器”的必要条件：它覆盖了 Flex 项默认的 min-height: auto 行为，使 flex: 1 真正按可用空间计算，而非被内容高度绑架。
- 所有中间容器（.sec1_2 → 外层蓝色 flex 容器 → 滚动区外层 div）都需显式设置 height: 100% 或 flex: 1，形成完整高度链。
- 避免在 .containerWithScroll 或其子元素上使用 height: 100% 同时又未约束祖先高度——这会导致计算失败或回退到内容高度。
- 若使用 vh 单位（如 height: 100vh），需注意移动端 Safari 等浏览器中 vh 可能随地址栏显示/隐藏变化；推荐坚持 height: 100% + flex: 1 组合，更稳定可靠。
最终效果：无论向滚动区添加多少个
100
，.sec1 高度始终保持与其他区域（.sec2, .sec3）的等比关系，仅 .containerWithScroll 内部出现滚动条——真正实现「布局比例恒定，内容滚动隔离」。
