本文讲解在 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%，常会遇到一个典型矛盾：
✅ 内容较少时，子元素能“撑满”视口高度；
❌ 但内容增多时，它却被强制截断在 100% 高度内，导致内容溢出、覆盖后续兄弟元素（如问题中 #child-2 溢入 #child-3），且滚动失效。
根本原因在于：min-height 是一个约束性最小值，但它无法与 Flex 的自动尺寸分配机制协同工作——当父容器是 flex 容器时，子元素的尺寸应优先由 flex 相关属性（flex-grow/flex-shrink/flex-basis）控制，而非传统盒模型的 height 或 min-height。
✅ 正确解法：使用 flex: 0 0 100%
该简写等价于：
flex-grow: 0; /* 不放大：避免抢占剩余空间 */ flex-shrink: 0; /* 不缩小：防止内容多时被压缩 */ flex-basis: 100%; /* 初始基准高度 = 父容器高度（即 100%）*/
此时，每个子元素以 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;
}
<div class="container">
<div id="child-1">
<div class="block"></div>
</div>
<div id="child-2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div id="child-3"></div>
</div>
? 关键注意事项：
-
flex-basis: 100%的计算基准是父容器的主轴尺寸（此处为.container的height: 100%），因此需确保父容器高度明确（如height: 100vh或height: 100%配合祖先高度链）。 - 若希望某子项在内容少时“最小占满”，内容多时“可滚动自身”，可改用
flex: 0 0 100%; overflow-y: auto。 - 避免混用
min-height和flex-basis控制同一维度——这会导致行为不可预测，Flex 布局应以flex属性为唯一权威。
总结：在 Flex 容器中，min-height 不是控制子项初始高度的合适工具；flex: 0 0 [basis] 才是兼顾“最小占位”与“自由扩展”的标准实践。
