使用flex布局，子元素怎么高度自适应？

1、想用flex实现这种布局

2、各个子元素高度不固定，从上到下依次排列
请问可以怎么实现？

附：
我对父元素定义了下面的规则：

display:flex;
flex-flow:row wrap;

对子元素用p标签放了一些文本，未设置高度，结果显示效果如下红色标记是子元素被拉伸了，高度没有自适应：

父元素上增加align-items: flex-start;

因为交叉轴的对齐方式，默认是 stretch