Masonry flexbox avec ordre horizontal au lieu de vertical avec des hauteurs différentes

Question

J'utilise actuellement le code suivant pour créer une grille de maçonnerie en CSS pur

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 29em;
}

.flex-item {
  display: flex;
  font-size: 30px;
  min-height: 200px;  /* Would use just `height` but Firefox is weird */
  flex: 0 0 auto;
  width: 33.333%;
}

Cela fonctionne bien, mais je saisis manuellement des données à partir du backend et j'essaie de faire en sorte que mon contenu se présente comme suit :

[1][2][3]
[4][5][6]
[7][8][9]

Au lieu de cela, ça se termine comme ça :

[1][4][7]
[2][5][8]
[3][6][9]

Comment puis-je réaliser la mise en page à comptage horizontal ? J'ai également un CodePen montrant mon problème Les hauteurs sont inconnues

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 29em;
}

.flex-item {
  display: flex;
  font-size: 30px;
  min-height: 200px;  /* Would use just `height` but Firefox is weird */
  flex: 0 0 auto;
  width: 33.333%;
}

.flex-item:nth-child(1) {
  min-height: 250px;
}

.flex-item:nth-child(2) {
  min-height: 350px;
}

.flex-item:nth-child(3) {
}

.flex-item:nth-child(4) {
  min-height: 300px;
}

.flex-item:nth-child(5) {
  min-height: 250px;
}

.flex-item:nth-child(6) {
}

.flex-item:nth-child(7) {
  min-height: 250px;
}

.flex-item:nth-child(8) {
}

.flex-item:nth-child(9) {
  min-height: 400px;
}

/* cosmetic styles */

body {
  font: 600 30px monospace;
}

.flex-item {
  background: #95a5a6;
  border-radius: 10px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  /* to account for padding */
  color: #fff;
  padding: 15px;
}

.flex-item:nth-child(6n + 1) {
  background: #2ecc71;
}
.flex-item:nth-child(6n + 2) {
  background: #3498db;
}
.flex-item:nth-child(6n + 3) {
  background: #9b59b6;
}
.flex-item:nth-child(6n + 4) {
  background: #f1c40f;
}
.flex-item:nth-child(6n + 5) {
  background: #e67e22;
}
.flex-item:nth-child(6n) {
  background: #e74c3c;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <div class="flex-item">6</div>
  <div class="flex-item">7</div>
  <div class="flex-item">8</div>
  <div class="flex-item">9</div>
</div>