如何使元素按父级的高度在列中流动

Question

问题：如何在列中布置项目，使其填满然后包裹。

实时代码：https://codepen.io/matthewharwood/pen/NWxqXVv

.column-wrapper 
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;

.column-element 
  padding: 12px;

h1 
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #cacaca;
  opacity: .75;
  font-size: 12px;

p 
  font-family: sans-serif;
  font-size: 16px;
  margin: 4px 0;

<div class="column-wrapper">
  <div class="column-element">
    <h1>Collaborators</h1>
    <p>Joe</p>
    <p>Karen</p>
    <p>Randy</p>
  </div>
  <div class="column-element">
    <h1>Company</h1>
    <p>R/GA</p>
    <p>Uber</p>
  </div>
  <div class="column-element">
    <h1>Technology</h1>
    <p>React</p>
    <p>FusionJS</p>
    <p>Styletron</p>
    <p>Baseweb</p>
    <p>Webpack</p>
    <p>Cloudinary</p>
  </div>
  <div class="column-element">
    <h1>Profession</h1>
    <p>Software Engineer</p>
    <p>Designer</p>
    <p>HR</p>
    <p>CEO</p>
    <p>CTO</p>
  </div>
  <div class="column-element">
    <h1>Dates</h1>
    <p>June 3 2018 ~ Aug 28 2018</p>
  </div>
    <div class="column-element">
    <h1>My Role</h1>
    <p>Software Engineer</p>
  </div>
</div>

所需的布局：

注意：如果'.column-element'内部<p />或<h1 />要转至下一栏，我希望他们转到下一栏。因此，无法使用column-count。