小编Jer*_*own的帖子

我想制作一个弹性盒，其中：

1. 项目按列排列
2. 只要所有项目都适合固定宽度，换行就会创建更多列。
3. 如果项目需要更多空间，则弹性盒会在之后垂直增长，并使用垂直滚动条而不是水平滚动条。

有没有什么方法可以在不使用Javascript的情况下实现这一目标？

下面的代码会做正确的事情，直到项目太多，但随后它会水平溢出而不是垂直溢出。

<div style="height: 100%; width: 100%; overflow-y: auto;">
  <div style="display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; height: 100%; overflow-y: auto">
    <div style="width: 15em;"> a </div>
    <div style="width: 15em;"> b </div>
    <div style="width: 15em;"> c </div>
    <div style="width: 15em;"> d </div>
    <div style="width: 15em;"> e </div>
    <div style="width: 15em;"> f </div>
    <div style="width: 15em;"> g </div>
    <div style="width: 15em;"> h </div>
    <div style="width: 15em;"> i </div>
    <div style="width: 15em;"> j </div>
    <div style="width: 15em;"> k …