CSS Flexbox - 如何使子元素使用剩余的垂直空间

Question

我有一个如下所示的flex布局：

正如我在标题中所描述的那样，我试图实现这种结果：

以下是codepen

我已尝试将flex-direction设为column，但它无效。

flex-direction: column;
flex-wrap: wrap;