设置固定高度的div内容溢出时如何自动分列展示而非纵向滚动

你可以通过两种CSS原生方案实现需求，不需要额外JS逻辑： #

方案1：CSS多列布局（兼容性最优） #

该方案是实现多列流式排布的原生语法，适配场景最广，给外层主div添加如下样式即可：

/* 外层容器样式 */
.outer-container {
  height: 30rem;
  /* 核心多列配置 */
  column-width: 100%; /* 可自定义固定列宽，比如25rem */
  column-fill: auto; /* 必须设置：优先填满当前列再切换下一列 */
  overflow-x: auto; /* 列超出容器宽度时展示横向滚动条，可按需调整 */
  /* 可选配置：列间距、分隔线 */
  column-gap: 2rem;
  column-rule: 1px solid #e5e7eb;
}

注意：不要修改column-fill: auto的配置，默认值balance会尝试把内容均匀分配到所有列，无法实现先填满一列再换列的效果。

方案2：CSS Grid布局（灵活性最高） #

如果需要自定义列宽、子元素对齐规则，更推荐使用Grid布局：

.outer-container {
  height: 30rem;
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(min-content, 1fr));
  grid-auto-flow: column; /* 核心配置：排布顺序为先行后列，满了自动开新列 */
  overflow-x: auto;
  /* 可选配置：行列间距 */
  gap: 1rem 2rem;
}

如果你需要列宽自动适配容器宽度，不需要横向滚动，可额外添加如下配置：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

将200px调整为你需要的最小列宽即可。 #

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