父元素高度不足时如何让子元素自动跳转至新列顶部显示

方案1：Flexbox 布局（推荐，兼容性好，灵活度高） #

无需修改现有HTML结构，仅调整父容器的CSS属性即可实现需求：

#outer {
  min-width: 100px;
  max-width: 200px;
  height: 96px;
  background-color: #ddd;
  /* 新增flex相关配置 */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 可按需调整列间距，默认0即可贴合需求 */
  column-gap: 0;
}
#outer div {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  /* 避免子元素被flex布局自动压缩高度 */
  flex-shrink: 0;
}

实现逻辑：

• 父容器设置为列方向的flex布局并开启自动换行
• 剩余高度不足以容纳下一个子元素时，自动换到右侧新列排列
• 原生支持子元素动态高度，无需手动计算每列可容纳数量
• 父容器max-width限制最多2列，完全匹配原有需求

方案2：CSS Multi-column 多列布局（代码更简洁） #

同样不需要修改HTML结构，仅调整父容器CSS即可：

#outer {
  min-width: 100px;
  max-width: 200px;
  height: 96px;
  background-color: #ddd;
  /* 新增多列布局配置 */
  column-width: 100px;
  column-gap: 0;
}
#outer div {
  width: 100px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  /* 避免单个子元素被切割拆分到不同列 */
  break-inside: avoid;
}

实现逻辑：

• 直接指定单列宽度为100px，浏览器自动根据父容器高度计算所需列数
• 适合子元素高度不固定的场景，自动避免元素跨列断裂

两种方案都无需拆分父容器，兼容所有现代浏览器及IE11以上版本。

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