本文讲解如何通过合理配置 Flexbox 的 flex-direction、flex-wrap 和 overflow 属性，实现卡片在桌面端横向排列、移动端纵向堆叠的响应式布局，同时避免父容器因弹性伸缩而意外撑大或溢出。

本文讲解如何通过合理配置 flexbox 的 `flex-direction`、`flex-wrap` 和 `overflow` 属性，实现卡片在桌面端横向排列、移动端纵向堆叠的响应式布局，同时避免父容器因弹性伸缩而意外撑大或溢出。

在使用 Flexbox 构建响应式布局时，一个常见陷阱是：当父容器设为 display: flex 并启用 flex-grow: 1 后，子元素（如 .column）可能不受控地拉伸，导致整体布局超出视口或触发水平滚动条。尤其在嵌套多层 flex 容器（如 .container → .row → .column）时，flex-wrap: wrap 与 flex-direction: column 在媒体查询中混用，还会引发意外交互——例如在移动端本该垂直堆叠的元素，因 flex-wrap: wrap 未被重置，反而强制尝试“换行”，却因高度不足而表现异常。

核心修复策略有两点：

✅ 限制父容器的弹性溢出
在最外层 .container 上添加 overflow: hidden，可有效截断因 flex-grow 引起的不可控扩张；若需更精细控制，也可结合 max-width / max-height 或使用相对单位（如 vh/vw）替代无约束的 flex-grow。

✅ 精准重置 flex 布局行为
在媒体查询中切换为 flex-direction: column 时，必须显式清除 flex-wrap（设为 unset 或 nowrap），否则 wrap 仍会尝试在纵轴上“换行”，而纵轴换行在单列场景下无意义，且易干扰尺寸计算。

以下是优化后的关键 CSS 片段：

.container {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  overflow: hidden; /* 关键：阻止 flex-grow 导致的溢出 */
}

#row-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 桌面端允许换行 */
}

@media (max-width: 800px) {
  #row-2 {
    flex-direction: column;
    flex-wrap: unset; /* 关键：禁用换行，确保严格垂直堆叠 */
  }

  #column-1 {
    height: 40vh;
    min-height: 300px;
  }

  #column-2 {
    height: 10vh;
    min-height: 100px;
    margin-top: 0;
  }
}

⚠️ 注意事项：

• 避免对 .column 同时设置 flex-grow 和 min-width / min-height，二者在不同断点下可能冲突；建议优先使用 flex-basis + flex-shrink 组合控制基础尺寸与收缩性。
• 若 .card 内部也使用 Flexbox，请确保其 flex-direction 不受外层 flex-wrap 影响（可加 flex-shrink: 0 防止压缩变形）。
• 在移动端，#column-2 设置了 overflow: scroll，配合 height 限制后才能真正启用滚动，否则内容仍会撑高容器。

总结：Flexbox 的响应式切换不是简单切换 flex-direction，而是需协同管理 flex-wrap、overflow、尺寸约束三者关系。通过「明确重置」和「主动截断」双策略，即可稳定实现行列自适应，兼顾布局语义与视觉完整性。