寻求CSS解决方案：实现宽度自适应的纵向堆叠Flex容器

将flex容器的display: flex替换为display: inline-flex，即可让容器宽度根据子项换行后的列数自动适配，无需JavaScript。

核心CSS调整如下：

.flex-container {
  display: inline-flex; /* 关键修改 */
  height: 400px;
  flex-wrap: wrap;
  flex-direction: column;
  /* 可选：添加边框方便观察容器范围 */
  border: 1px solid #ccc;
}

.flex-item {
  width: 100px;
  height: 80px; /* 给子项设置固定高度，方便测试换行逻辑 */
  background: #f0f0f0;
  margin: 5px;
}

对应的HTML示例：

<div class="flex-container">
  <div class="flex-item">项1</div>
  <div class="flex-item">项2</div>
  <div class="flex-item">项3</div>
  <div class="flex-item">项4</div>
  <div class="flex-item">项5</div>
  <div class="flex-item">项6</div>
  <div class="flex-item">项7</div>
  <div class="flex-item">项8</div>
  <div class="flex-item">项9</div>
  <div class="flex-item">项10</div>
</div>

原理说明：

• inline-flex让容器具备行内元素特性，宽度由内部内容的总宽度决定；
• 子项沿垂直方向（column）排列，当总高度超出容器的400px限制时自动换行（wrap），容器会自动累加所有列的宽度，实现动态自适应。

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