本文重点说明在 Flex 布局中，如何让子元素在垂直方向默认占满父容器 100% 高度，避免内容过少时出现高度塌陷，同时又能在内容增多时继续自然撑开，不会溢出并遮挡其他兄弟元素。更推荐的实现方式，是使用 flex: 0 0 100% 来替代 min-height: 100%。

本文主要讲解在 Flex 布局场景下，如何让子元素在纵向排列时默认占据父容器 100% 高度，避免内容太少时高度不足，同时在内容变多后还能继续自动扩展，不发生溢出覆盖其他兄弟元素的问题。核心方案就是用 flex: 0 0 100% 替代 min-height: 100%。

当我们在设置了 display: flex; flex-direction: column 的容器中，为子元素添加 min-height: 100% 时，通常会遇到一个很常见的 Flex 高度问题：
✅ 内容较少时，子元素看起来确实能够“撑满”容器或视口高度；
❌ 但当内容持续增多后，子元素往往会被限制在 100% 高度范围内，导致内容溢出，甚至覆盖后面的兄弟元素（就像示例中的 #child-2 覆盖到 #child-3 一样），同时滚动表现也可能异常。

问题的关键在于：min-height 本质上属于传统盒模型中的最小高度约束，而在 Flex 布局里，子项尺寸更应优先由 flex 相关属性（flex-grow/flex-shrink/flex-basis）来决定，而不是单纯依赖 height 或 min-height。也就是说，想正确控制 Flex 子元素高度，应该优先从 Flex 自身的尺寸分配机制入手。

✅ 更合适的解决方案：使用 flex: 0 0 100%
这个简写等价于：

flex-grow: 0;/* 不放大：避免额外占用剩余空间 */
flex-shrink: 0;/* 不缩小：防止内容较多时被压缩 */
flex-basis: 100%; /* 初始基准高度 = 父容器高度（即 100%）*/

这样设置后，每个 Flex 子元素都会以 100% 作为初始高度参与布局。由于 flex-grow: 0，它们不会主动继续拉伸去填满多余空间；由于 flex-shrink: 0，它们也不会在空间不足时被压缩。更重要的是：当内部实际内容高度超过 100% 时，Flex 子项仍可自然向下扩展，不会被 flex-basis 死死卡住，也不会轻易出现覆盖其他兄弟元素的情况。

下面是优化后的完整示例：

body {
height: 100vh;
margin: 0;
}

.container {
height: 100%;
overflow: auto;/* 确保整体可滚动 */
display: flex;
flex-direction: column;
}

#child-1 {
flex: 0 0 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;
}