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

Question

使用两列flexbox布局，如何使大小不同的子代填充所有可用空间，而不是使所有子代都具有该行中最高的子代的高度？

我在jsbin上建立了一个演示该问题的演示。我希望所有的孩子都和他们包裹的东西一样大。

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

Answer 1

这就是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;
}