如何实现列表项先竖排后横排，自适应列数及固定高度滚动？

要实现从上到下、从左到右的排列，同时满足固定高度、自适应列数、最多4列的需求，调整CSS即可达成目标：

.flex #left {
  height: 400px; /* 固定高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  width: 100%; /* 宽度随浏览器窗口自适应 */
}

#files {
  display: flex;
  flex-direction: column; /* 设置纵向排列方向 */
  flex-wrap: wrap; /* 纵向占满后自动换行到右侧新列 */
  list-style: none;
  margin: 0;
  padding: 10px;
  position: relative;
  user-select: none;
  width: 100%;
  max-width: calc(4 * 250px); /* 限制最多4列（每列最大宽度250px） */
  max-height: 100%; /* 继承父容器高度，触发纵向换行逻辑 */
}

#files li {
  min-width: 200px; /* 列最小宽度 */
  max-width: 250px; /* 列最大宽度 */
  width: 100%; /* 每列宽度占满 */
  margin-bottom: 8px; /* 可选：添加列表项之间的垂直间距 */
}

<div class="flex">
  <div id="left">
    <ul id="files">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      ...
    </ul>
  </div>
</div>

关键调整说明 #

• 给#left设置固定高度400px和overflow-y: auto，确保内容超出容器时自动显示垂直滚动条。
• 将#files的flex方向改为column，搭配flex-wrap: wrap实现纵向排列，当一列高度占满后自动切换到右侧新列。
• 通过max-width: calc(4 * 250px)限制最多4列，当浏览器窗口宽度足够时，每列最大宽度为250px；窗口宽度不足时，列数会自动减少（最低保证每列200px）。
• 调整li的样式，取消原flex:1避免列表项高度被强制拉伸，同时确保列宽符合要求。

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