Дисплей сгибает ряд и унифицированные размеры

Question

Я бы хотел, чтобы все мои элементы имели одинаковую высоту, а разделитель покрывал всю высоту. Как я могу достичь этого, пожалуйста?

Разделитель розовый, вы можете увидеть его здесь с height: 5em

.daddy {
  height: 10em;
  width: 10em;
}

.container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid lightgrey;
}

.child1 {
  width: 3em;
  height: 10em;
  background-color: red;
}

.child2 {
  width: 3em;
  height: 15em;
  background-color: blue;
}

.separator {
  width: 10px;
  height: 5em;
  background-color: pink;
}

<div class="daddy">
  <div class="container">
    <div class="child1"></div>
    <div class="separator"></div>
    <div class="child2"></div>
  </div>
</div>

Answer 1

Если вы удалите элементы выравнивания из контейнера, все три столбца будут расти, чтобы заполнить строку

.daddy {
  height: 10em;
  width: 10em;
}

.container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  border: 1px solid lightgrey;
  justify-content:center;
}

.child1 {
  width: 3em;
  background-color: red;
  height: 10em;         /* this is just to give it some height as no column currently has any height */
}

.child2 {
  width: 3em;
  background-color: blue;
}

.separator {
  width: 10px;
  background-color: pink;
}

<div class="daddy">
  <div class="container">
    <div class="child1">
    </div>

    <div class="separator">
    </div>

    <div class="child2">
    </div>
  </div>
</div>