Как одинаково разместить пустые div с CSS только во flex?

Question

Итак, у меня есть структура, очень похожая на фрагмент ниже. У меня проблема в том, что я пытаюсь сделать так, чтобы элементы div, такие как child, всегда имели одинаковую высоту относительно контейнера, даже если они пусты. Поэтому, если есть двое детей, они должны составлять 50% от родителя, если трое детей - 33,3% от родителя и т. Д. Много копал, пытался использовать flex-grow и устанавливать его на дочерние элементы, добавляя контент after в класс childContent, если он был пустым, но пустые дочерние элементы по-прежнему разрушались. Можно ли даже достичь одинаковой высоты у детей без использования js и фиксированной высоты, и если да, то как?

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.child {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.childHeader {
  display: flex;
  flex-direction: row;
}

.headerItem {
  background-color: red;
}

.childContent {
  background-color: white;
}

.childContent:empty:after {
  content: '.';
  visibility: hidden;
  min-height: 300px;
}

.contentItem {
  background-color: skyblue;
  border: 3px solid black;
}

<div class="container">
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
      <div class="contentItem">1</div>
      <div class="contentItem">2</div>
      <div class="contentItem">3</div>
      <div class="contentItem">4</div>
      <div class="contentItem">5</div>
      <div class="contentItem">6</div>
      <div class="contentItem">7</div>
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
</div>

Answer 1

Проверьте это, я не совсем уверен, что это то, что вы хотите сделать.
Я только что добавил min-height: calc(100vh - 60px); в ваш .childContent

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.child {
  display: flex;
  flex-direction: column;
}

.childHeader {
  display: flex;
  flex-direction: row;
}

.headerItem {
  display:flex;
  flex-basis:100%;
  background-color: red;
}

.childContent {
  background-color: grey;
  position: relative;
  display: block;
  min-height: calc(80vh - 60px);
}

.childContent:empty::after {
  content: '.';
  visibility: hidden;
  
}

.contentItem {
  background-color: skyblue;
  border: 3px solid black;
}

<div class="container">
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
      <div class="contentItem">1</div>
      <div class="contentItem">2</div>
      <div class="contentItem">3</div>
      <div class="contentItem">4</div>
      <div class="contentItem">5</div>
      <div class="contentItem">6</div>
      <div class="contentItem">7</div>
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
</div>

Проверьте это один https://developer.mozilla.org/en-US/docs/Web/CSS/calc