将不同高度的盒子均匀地分布在 flexbox 列上

Question

我有一些宽度相同但高度不同的框（取决于它们的内容——它们是标题+文本的注释）和一个自动高度的容器（愿意滚动）。这个想法是将容器中的笔记跨列分布，使其看起来像 Google Keep。现在我正在使用 flexbox 行，但我正在失去空间：

我当前的 CSS 看起来像：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  padding: 10px;
}
.note {
  flex-basis: 50%;
}
.note>div {
  margin: 10px;
}

问题是，如果我切换到flex-direction: column，因为height: auto我的 flexbox 容器，注释只生成一列，因为他们看不到任何换行的理由。如果不先渲染注释，在 Javascript 中计算容器的高度将非常困难（我正在使用 React ......）我在这里遗漏了什么吗？

这是我希望实现的结果：

我不想使用 jQuery，我很想避免使用 Javascript ...

Answer 1

我最终放弃了 flexbox 并使用了列：

.container {
  column-count: 3;
  column-gap: 0;
  padding: 10px;
}
.note {
  display: inline-block; /* important to wrap notes not content */
  width: 100%;
}
.note>div {
  margin: 10px;
}

使用内联块注释，不要隐藏溢出。