在 Flex 布局中，仅用 min-height: 100% 无法兼顾“最小占满容器”与“内容超量时自动撑开”的双重需求；正确解法是使用 flex: 0 0 100%（即禁用伸缩、设基础尺寸为 100%），使子项初始占据全高，同时允许内容自然溢出并触发父容器滚动。
在 flex 布局中，仅用 `min-height: 100%` 无法兼顾“最小占满容器”与“内容超量时自动撑开”的双重需求；正确解法是使用 `flex: 0 0 100%`（即禁用伸缩、设基础尺寸为 100%），使子项初始占据全高，同时允许内容自然溢出并触发父容器滚动。
当使用 display: flex; flex-direction: column 的容器（如 .container）管理垂直排列的子元素时，常见的误区是依赖 min-height: 100% 来确保每个子项至少填满视口高度。但问题在于：min-height 在 Flex 子项中受父容器主轴约束，且默认 flex-shrink: 1 可能导致压缩，而 flex-grow: 0 又阻止其超出设定范围——结果就是内容超量时被截断或重叠，而非自然撑开。
✅ 正确方案是改用 flex 简写属性精确控制行为：
#child-1, #child-2, #child-3 {
flex: 0 0 100%; /* 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 100%; */
}
-
flex-grow: 0：不抢占剩余空间（避免多个子项争抢高度） -
flex-shrink: 0：不因空间不足而缩小（保障最小视觉高度） -
flex-basis: 100%：以父容器高度（100%）为初始基准尺寸
这样，每个子项初始渲染时高度 ≈ 容器高度，满足“内容少时也占满”的需求；而当内部内容（如多个 .block）总高度超过 100% 时，由于 flex-shrink: 0 不会压缩它，且父容器设置了 overflow: auto，子项将自然延伸，触发滚动条，彻底解决内容溢出覆盖相邻子项的问题。
⚠️ 注意事项：
-
flex-basis: 100%依赖父容器有明确高度（如本例中的height: 100%+body { height: 100vh }），否则百分比计算失效； - 避免对同一元素同时设置
min-height和flex-basis，易引发冲突； - 若需某子项优先撑满剩余空间（如底部固定区域），可单独设
flex: 1，其余仍用flex: 0 0 100%。
综上，Flex 布局中“保底高度 + 自由伸展”的本质，不是靠 min-height，而是通过 flex-basis 设定基准 + flex-shrink: 0 锁定下限 + 父容器 overflow 控制溢出行为——三者协同，方得兼顾。
