不使用grid时，flex父容器宽度低于300px如何让子div上下堆叠

实现方案 #

可以通过以下两种纯Flex布局的方案实现需求，无需使用Grid布局：

方案1：利用flex自动换行特性，无需媒体查询 #

核心逻辑是通过flex-wrap: wrap让父容器支持子元素换行，同时给右侧文本列设置最小宽度，当父容器宽度小于两个子元素最小宽度之和（100px图片宽度 + 200px文本最小宽度=300px）时，文本列自动换行到下方。
修改后的CSS代码如下：

.container {
  display: flex;
  border-style: solid;
  border-width: 1px;
  /* 新增：支持子元素换行 */
  flex-wrap: wrap;
  /* 可选：垂直方向顶部对齐，避免内容错位 */
  align-items: flex-start;
  /* 可选：增加间隙优化显示效果 */
  gap: 10px;
}

.image {
  width: 100px;
  height: 100px;
}

/* 新增：右侧列弹性占满剩余空间，最小宽度200px */
.column2 {
  flex: 1;
  min-width: 200px;
}

方案2：使用媒体查询显式控制断点，适配逻辑更可控 #

如果需要更精准的控制断点行为，直接在300px断点处修改flex主轴方向为纵向即可：
修改后的CSS代码如下：

.container {
  display: flex;
  border-style: solid;
  border-width: 1px;
  /* 可选：垂直顶部对齐 */
  align-items: flex-start;
  /* 可选：间隙 */
  gap: 10px;
}

.image {
  width: 100px;
  height: 100px;
}

/* 新增：容器宽度小于300px时改为纵向排列 */
@media (max-width: 299.98px) {
  .container {
    flex-direction: column;
  }
}

两种方案都兼容主流浏览器，你可以根据实际业务场景选择使用。

内容的提问来源于stack exchange，提问作者Lawrence