如何实现固定高度容器内容垂直填满后水平扩展？

通过CSS多列布局的属性组合，可完美实现「文本先垂直填满固定高度容器，内容溢出时自动横向扩展容器」的需求。

核心CSS代码 #

.text-container {
  height: 200px; /* 固定高度，按需求替换为实际值 */
  column-width: min-content; /* 列宽设为内容最小宽度，强制文本优先换行填充垂直空间 */
  column-fill: auto; /* 优先填满当前列的垂直空间，再生成新列 */
  column-gap: 0; /* 可选：移除列间距，需保留间距可调整为具体数值（如10px） */
}

效果说明 #

• 文本量较少时：容器宽度自动收缩至min-content（即文本能换行的最小宽度），文本自动换行填满固定高度的容器。
• 文本量超出容器高度时：自动生成新的列，容器宽度随列数增加而扩展，所有内容始终保持在固定高度内显示。
• 若需要自定义最小列宽，只需将column-width的值替换为具体数值（如150px），依然能实现先垂直填充再横向扩展的逻辑。

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