在 Flex 容器中，仅用 min-height: 100% 无法兼顾“至少占满容器高度”和“内容超量时自动扩展”两个需求；应改用 flex: 0 0 100%（即禁用伸缩、基准尺寸为父容器高度），使子项获得初始高度保障，同时不阻碍内容自然溢出。
在 flex 容器中，仅用 `min-height: 100%` 无法兼顾“至少占满容器高度”和“内容超量时自动扩展”两个需求；应改用 `flex: 0 0 100%`（即禁用伸缩、基准尺寸为父容器高度），使子项获得初始高度保障，同时不阻碍内容自然溢出。
当使用 display: flex; flex-direction: column 的容器管理垂直布局时，开发者常误以为 min-height: 100% 能让子元素“至少占满视口/父容器高度，且内容多时可继续增长”。但实际中，min-height 在 Flex 子项上受 flex-shrink 默认行为影响——当多个子项总高度超过容器时，浏览器可能强制压缩它们（尤其在未显式设置 flex-shrink: 0 时），导致内容溢出或重叠。
✅ 正确解法是使用 flex: 0 0 100%：
-
flex-grow: 0→ 不抢占剩余空间（避免拉伸） -
flex-shrink: 0→ 禁止收缩（防止被压缩导致内容截断） -
flex-basis: 100%→ 初始主轴尺寸设为父容器高度（提供“最小高度”视觉保障）
以下是优化后的完整示例：
body {
height: 100vh;
margin: 0;
}
.container {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
#child-1 {
flex: 0 0 100%; /* ✅ 替代 min-height: 100% */
background: rgb(255, 179, 179);
}
#child-2 {
flex: 0 0 100%;
background: rgb(135, 135, 232);
z-index: 2;
}
#child-3 {
flex: 0 0 100%;
background: rgb(208, 219, 125);
}
.block {
height: 200px;
width: 50px;
background: rgb(135, 214, 135);
margin-bottom: 10px;
}
⚠️ 注意事项：
-
flex-basis: 100%依赖父容器有明确高度（如本例中.container的height: 100%），若父级高度未定义，100%将失效； - 若需子项在内容较少时仍撑满容器、内容较多时允许滚动，可在对应子项上添加
overflow-y: auto； - 避免混用
min-height和flex-basis—— 二者逻辑冲突，flex-basis在 Flex 布局中优先级更高，且语义更准确。
总结：在 Flex 布局中，flex: 0 0 [size] 是替代 min-height 实现“保底尺寸 + 自由扩展”的标准方案，它既尊重容器约束，又完全兼容动态内容高度变化，是响应式垂直分栏布局的可靠选择。
