How to have elements flow in columns by height of parent

Question

Question: How can I layout items in columns where they will fill up the column and then wrap.

Live code: 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>

Desired Layout:

Note: If '.column-element' inner <p /> or <h1 /> were to break to the next column I'd like them to go to the next column. Therefore, using column-count will not work.

Answer 1

Do the following change in your CSS property:

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

.column-wrapper {
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.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>