如何强制元素在flex容器的列换行中换行？

Question

There is codepen with examples

1. 我需要固定宽度的flex容器以使其高度适合其内容
2. 需要固定宽度的元素以使其高度适合其内容
3. 如示例1所示，需要最大程度地缠绕，以最小化伸缩容器的高度
4. 元素不得像示例1中那样从容器中取出

我的意思是，如果在第一个示例中要摆脱容器高度，则容器应适合最长列的大小。

一旦未明确设置高度，元素就会停留在一列中。

我尝试通过将容器包装在另一个flex容器中并添加邻居flex“ expander”来压缩容器，但是没有成功（示例3）。 是否只有CSS解决方案？

元素的底边不应是笔直的（如示例1所示）。

This不是我的情况：您可以看到元素的高度可以不同。它仅取决于其内容高度。我不能使用flex基础。因此，它不是重复的帖子。但我会尝试使用网格。谢谢。

html：

<div class="container" style="height: 100px;">
<div class="elem">
    <div class="elem-content" style="height: 110px;">
        cont 1
    </div>
</div>
<div class="elem">
    <div class="elem-content" style="height: 20px;">
        cont 2
    </div>
</div>
<div class="elem">
    <div class="elem-content" style="height: 30px;">
        cont 3
    </div>
</div>

css：

.container {
    flex-flow: column wrap;
    display: flex;
    background-color: wheat;
    width: 32%;
  }

  .elem {
    background-color: antiquewhite;
    width: 80px;
    border: 1px solid;
    margin: 3px;
  }