本文讲解如何通过 Flexbox 正确实现“宽屏横向排列、窄屏纵向堆叠”的响应式卡片布局，重点解决因 flex-grow 过度拉伸和 flex-wrap 冲突导致的容器溢出问题，并提供可直接复用的 CSS 修复方案。
本文讲解如何通过 Flexbox 正确实现“宽屏横向排列、窄屏纵向堆叠”的响应式卡片布局，重点解决因 `flex-grow` 过度拉伸和 `flex-wrap` 冲突导致的容器溢出问题，并提供可直接复用的 CSS 修复方案。
在构建响应式布局时，许多开发者会尝试用 display: flex 配合 flex-direction: row 和媒体查询切换为 column，却常遇到两个典型问题：一是父容器因 flex-grow: 1 无限扩张，导致子元素被强行撑开甚至内容溢出；二是窄屏下虽设了 flex-direction: column，却遗漏了 flex-wrap: wrap 的残留影响——此时 wrap 在单列模式下反而试图将所有子项“挤”进一行高度，引发高度塌陷或滚动异常。
要根本解决，需从容器约束与弹性行为重置两方面入手：
✅ 第一，限制容器生长边界.container 使用 flex-grow: 1 本意是占满可用空间，但若未设置溢出控制，其子项（如 #row-2）可能突破视口。应在 .container 上添加 overflow: hidden，或更稳妥地配合 max-width / max-height（如 max-height: 100vh）防止失控扩展：
.container {
display: flex;
flex-grow: 1;
flex-direction: column;
overflow: hidden; /* 关键：截断溢出，避免滚动穿透 */
max-height: 100vh; /* 推荐：明确高度上限 */
}✅ 第二，精准重置 Flex 换行行为#row-2 在桌面端设为 flex-wrap: wrap 是为了多行容纳卡片，但在移动端切换为 column 后，wrap 已无意义，且可能干扰主轴布局逻辑（例如强制压缩高度）。因此媒体查询中必须显式清除：
@media (max-width: 800px) {
#row-2 {
flex-direction: column;
flex-wrap: nowrap; /* 或 flex-wrap: unset; 更彻底 */
}
/* 同时优化列高适应性 */
#column-1, #column-2 {
width: 100%; /* 确保占满父容器宽度 */
min-width: auto; /* 覆盖原 min-width，避免窄屏下溢出 */
}
#column-1 {
height: 70vh; /* 使用 vh 替代固定 px，提升响应性 */
}
#column-2 {
height: 30vh;
overflow-y: auto; /* 卡片多时启用垂直滚动 */
}
}? 额外建议：
- 对
.card类添加flex-shrink: 0，防止小屏幕下卡片被过度压缩； - 使用
gap替代margin控制卡片间距，避免外边距折叠问题； - 若
#column-2内卡片数量动态变化，可为其设置min-height: 0配合overflow，确保 flex 子项能正确收缩。
综上，Flexbox 响应式布局的关键不在“加功能”，而在“精准收口”：用 overflow 约束容器，用 flex-wrap: unset 清除冗余行为，再辅以相对单位（vh/%）替代绝对尺寸，即可稳定实现横纵自由切换且不溢出的理想效果。
