flexbox布局问题？

基本代码如下：

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

//css
section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border:1px solid #000;
  height: 500px;  // 问题出在这句？？？
}
div {
  display: inline-flex;
  background-color: #777;
  width: 49%;
  height: 50px;
  margin: 5px 0;
}

然而我想要这样的布局：

如何做到既给父元素加高度值，又能让它如上图合理排序？？谢谢，代码点击这里

---

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border:1px solid #000;
  height: 500px;
  align-content: flex-start  //new
}