html - 有没有办法停止 flex-flow : column wrap: after hitting 4 columns?

Question

我有一个名字列表，我希望名字填满一列，如果名字填满第一列(这是浏览器的高度)，我希望溢出开始填充第二列，然后是第三列，等等。我使用 flex-flow:列换行；为了达成这个。棘手的部分是我如何在 4 列停止？

我试过 column-count: 4;并给包装器一个宽度，但这些都不起作用

html 
<div class="wrapper">
    <div *ngFor="let foo of FooBar"></div
</div>
.wrapper{
    column-count: 4;
    margin-top: 0px;
    height: calc(100vh - 250px);
    display: flex;
    flex-flow: column wrap;
    overflow-y: scroll;
}

Answer 1

这样做:

<div class="wrapper">
    <div class="foo" *ngFor="let foo of FooBar"></div
</div>
.wrapper{
    column-count: 4;
    margin-top: 0px;
    height: calc(100vh - 250px);
    display: flex;
    flex-flow: column wrap;
    overflow-y: scroll;
}
.foo {
  max-width: 25%;
}