如何在CSS中实现固定高度容器内容过长时自动生成列？

当然可以！你已经找对路子了——借助CSS Flexbox的特性，就能轻松实现固定高度容器内的内容超出后自动生成新列的效果。

实现核心逻辑 #

这几个CSS属性的组合是关键：

• display: flex：将容器转为Flex布局容器，让内部元素能利用Flex的排版能力
• flex-direction: column：设置元素默认垂直方向排列
• flex-wrap: wrap：当垂直方向的总内容高度超过容器高度限制时，自动把剩余元素换行到右侧，形成新的列
• max-height（或固定height）：定义容器的高度上限，这是触发内容换行的临界条件

完整代码示例 #

.subnav { 
  background: #efefef; 
  padding: 10px 15px; 
  display: flex; 
}

.navbar-section { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  max-height: 200px;
  /* 可选优化：用gap统一控制元素间距，比单独给a加padding更规整 */
  gap: 10px;
}

.navbar-section a { 
  padding: 10px; 
  text-decoration: none;
  color: #333;
}

.navbar-section a:hover {
  background: #ddd;
  border-radius: 4px;
}

<div class="subnav">
  <div class="navbar-section">
    <a href="">Item 1</a>
    <a href="">Item 2</a>
    <a href="">Longer Item 3</a>
    <a href="">Item 4</a>
    <a href="">Item 5</a>
    <a href="">Longer Item 6</a>
    <a href="">Item 7</a>
    <a href="">Item 8</a>
    <a href="">Another Long Item 9</a>
  </div>
</div>

小技巧补充 #

• 如果想要列宽更统一，可以给.navbar-section的子元素（比如<a>）设置flex-basis或者固定宽度，避免因内容长度差异导致列宽参差不齐
• 也可以用CSS Grid的grid-template-rows结合grid-auto-flow: column实现类似效果，但Flexbox的方式在这种垂直换行场景下更直观易懂

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