将flexbox子级设置为不同的高度以占用可用空间

这就是Flexbox行的预期行为。Flexbox并不是要用纯CSS重新创建Masonry：一行中的项目不能占用为前一行/后一行分配的空间（如果您使用列方向，则列也是如此）。您可以使用align-
items防止它们拉伸，仅此而已：

#container { width: 800px;  display: flex;  flex-wrap: wrap;  align-items: flex-start;}.cell {  width: 300px;  flex: 1 auto;  padding: 10px;  border: 1px solid red;}