将不同高度的盒子均匀分布在 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，由于我的 flexbox 容器的height: auto，注释只占一列，因为它们看不到任何换行的理由。 如果不先渲染注释，在 Javascript 中计算容器的高度将非常困难（而且我正在使用 React ......） 我在这里遗漏了什么吗？

这是我希望达到的结果：

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

Answer 1

我最终放弃了 flexbox 并改用 columns：

.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;
}

Use inline-block 备注和don't hide the overflow。