我有一列 (DIV)，宽度为 300px，高度为 100vh，其中包含任意子项（其他高度不同的 DIV）。
当列（父DIV）被子元素填充时，它们应该位于彼此下方，只要高度没有达到100vh。
当子级超过100vh 的列高时，子级应继续在右侧，在“下一列”中。此列的行为方式应相同（填充有子项，然后定位到右侧）。
我正在寻找“仅 CSS”的解决方案。
【问题讨论】：
columns 似乎适用于任意儿童！ columns: 15rem; 不错！
标签： css
这样的东西能满足你的需要吗？
div.content {
height: 100vh;
display: flex;
flex-flow: column wrap;
}
div.outer_box{
background-color: darkseagreen;
width: 300px;
padding: 5px 3px;
margin: 0px 10px;
}
div.inner_box {
background-color: lightslategray;
border: thin solid black;
box-sizing: border-box;
padding: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Solution1.css">
</head>
<body>
<div class="content">
<div class="outer_box">
<div class="inner_box" style="height:3em">
0
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
1
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:12em">
2
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:8em">
3
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
4
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:3em">
5
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
6
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:6em">
7
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:9em">
8
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
9
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:8em">
10
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:11em">
11
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
12
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
13
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
14
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:11em">
15
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
16
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
17
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:6em">
18
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
19
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:9em">
20
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:3em">
21
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
22
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
23
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
24
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:6em">
25
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:11em">
26
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:9em">
27
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
28
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
29
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:9em">
30
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:6em">
31
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:11em">
32
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
33
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:5em">
34
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:5em">
35
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:12em">
36
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:8em">
37
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
38
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:7em">
39
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:10em">
40
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:11em">
41
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:6em">
42
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:3em">
43
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
44
</div>
</div>
<div class="outer_box">
<div class="inner_box" style="height:4em">
45
</div>
</div>
</div>
</body>
</html>正在做的是：
display: flex;)flex-flow: column wrap;)【讨论】：