本文讲解如何通过合理设置 flex-grow、flex-wrap 和 overflow，配合媒体查询，使 Flex 容器在水平排列卡片时自动换行、不溢出，在移动端无缝切换为垂直堆叠布局。
本文讲解如何通过合理设置 `flex-grow`、`flex-wrap` 和 `overflow`，配合媒体查询，使 flex 容器在水平排列卡片时自动换行、不溢出，在移动端无缝切换为垂直堆叠布局。
在使用 Flexbox 构建响应式布局时，一个常见痛点是：当子元素（如卡片）以 flex-direction: row 排列且启用 flex-wrap: wrap 时，父容器仍可能因 flex-grow 过度拉伸或未限制尺寸而横向溢出视口，尤其在嵌套多层 Flex 容器时更为明显。
核心问题在于两点：
-
父容器失控拉伸：
.container和#row-2均使用flex-grow: 1或类似值，导致它们无限扩张，挤压或撑开子项； -
媒体查询中
flex-wrap冲突：在max-width: 800px下将#row-2设为flex-direction: column，却未重置flex-wrap: wrap—— 此时wrap对单列无意义，反而可能干扰渲染逻辑（尤其在某些浏览器中引发意外行为）。
✅ 正确解法如下：
首先，为最外层容器添加约束，防止其无限制膨胀：
.container {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden; /* 关键：隐藏溢出，避免滚动条或内容越界 */
}
其次，修正 #row-2 的响应式行为。在桌面端保持横向流式布局（允许换行），在移动端强制垂直堆叠，并显式取消换行：
#row-2 {
display: flex;
flex-direction: row;
flex-wrap: wrap; /* 桌面端：卡片自动折行 */
flex-grow: 0.8;
background-color: blueviolet;
}
@media (max-width: 800px) {
#row-2 {
flex-direction: column;
flex-wrap: nowrap; /* ✅ 必须设为 nowrap，避免 column 下 wrap 引发异常 */
}
}
⚠️ 注意事项：
- 避免对
flex-direction: column的容器设置flex-wrap（除非特殊需求），因其默认无效且可能触发未定义行为； - 若
.card元素本身具有固定宽高或min-width，请确保其在小屏下能自适应（例如用width: 100%或max-width控制）； -
overflow: hidden应加在直接约束内容高度/宽度的父容器上（如.container或#row-2），而非body—— 否则可能截断重要内容或影响滚动体验； - 如需保留纵向滚动能力（如侧边栏），可将
#column-2的overflow: scroll保留，但需确保其父级（#row-2）有明确高度限制（如height: calc(100vh - Xpx)或max-height）。
最终效果：桌面端卡片水平排列、自动换行；移动端平滑转为垂直堆叠，所有内容严格限定在视口内，无横向溢出、无意外滚动条，布局稳健可控。
