html - Column flexbox : wrap to width limit, 然后增长高度？

Question

我想制作一个 flexbox，其中:

1. 元素按列排列
2. 只要所有元素都适合固定宽度，换行会创建更多列。
3. 如果元素需要更多空间，flexbox 会在此之后垂直增长，并带有垂直滚动条而不是水平滚动条。

没有 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 </div>
    <div style="width: 15em;"> l </div>
    <div style="width: 15em;"> m </div>
    <div style="width: 15em;"> n </div>
    <div style="width: 15em;"> o </div>
    <div style="width: 15em;"> p </div>
    <div style="width: 15em;"> q </div>
    <div style="width: 15em;"> r </div>
    <div style="width: 15em;"> s </div>
    <div style="width: 15em;"> t </div>
    <div style="width: 15em;"> u </div>
  </div>
</div>

Answer 1

这就是您要实现的目标吗？

.grandParent {
  height: 100%;
  width: 100%;
}
.parent {
  display: flex; 
  flex-direction: row; 
  flex-wrap: wrap; 
  width: 100%; 
  height: 100%; 
}
.parent > div {
  min-height: 3em;
  flex-basis: 15em;
  background-color: #f5f5f5;
  padding: 20px;
  box-sizing: border-box;
  margin: 3px;
  border: 1px solid #eee;
  text-align: center;
}

<div class="grandParent">
      <div class="parent">
        <div> item 1</div>
        <div> item 2</div>
        <div> item 3</div>
        <div> item 4</div>
        <div> item 5</div>
        <div> item 6</div>
        <div> item 7</div>
        <div> item 8</div>
        <div> item 9</div>
        <div> item 10</div>
        <div> item 11</div>
        <div> item 12</div>
        <div> item 13</div>
        <div> item 14</div>
        <div> item 15</div>
        <div> item 16</div>
        <div> item 17</div>
        <div> item 18</div>
        <div> item 19</div>
        <div> item 20</div>
        <div> item 21</div>
        <div> item 22</div>
        <div> item 23</div>
        <div> item 24</div>
        <div> item 25</div>
        <div> item 26</div>
        <div> item 27</div>
        <div> item 28</div>
        <div> item 29</div>
        <div> item 30</div>
      </div>
    </div>

还是这个？

.grandParent {
  height: 100%;
  width: 100%;
}
.parent {
  -webkit-column-width: 15em;
  -moz-column-width: 15em;
  column-width: 15em;
}
.parent > div {
  min-height: 3em;
  background-color: #eee;
  box-sizing: border-box;
  margin-bottom: 10px;
  border: 1px solid #eee;
  text-align: center;
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}
h2 {
    -webkit-column-span: all;
    column-span: all;
}

<div class="grandParent">
  <div class="parent">
    <div>item 1</div>
    <div>item 2</div>
    <div>item 3</div>
    <div>item 4</div>
    <div>item 5</div>
    <div>item 6</div>
    <div>item 7</div>
    <div>item 8</div>
    <div>item 9</div>
    <div>item 10</div>
    <div>item 11</div>
    <div>item 12</div>
    <h2>Some cool title</h2>
    <div>item 13</div>
    <div>item 14</div>
    <div>item 15</div>
    <div>item 16</div>
    <div>item 17</div>
    <div>item 18</div>
    <div>item 19</div>
    <div>item 20</div>
    <div>item 21</div>
    <div>item 22</div>
    <div>item 23</div>
    <div>item 24</div>
    <div>item 25</div>
    <div>item 26</div>
    <div>item 27</div>
    <div>item 28</div>
    <div>item 29</div>
    <div>item 30</div>
  </div>
</div>