在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。