Height 100% in Flexbox Item

by Austin Anderson

HTML

<div class="container flexed">
  <div class="flexed">
    <div class="flexed center-child">
      <div class="content">
        1
      </div>
    </div>
    <div class="flexed center-child">
      <div class="content">
        2
      </div>
    </div>
    <div class="flexed center-child">
      <div class="content">
        3
      </div>
    </div>
    <div class="flexed center-child">
      <div class="content">
        4
      </div>
    </div>
    <div class="flexed center-child">
      <div class="content">
        5
      </div>
    </div>
  </div>
</div>

CSS

.container {
  height: 50px; //grow till this height
  color: white;
  font-weight: bold;
}

.flexed {
  display: flex;
  flex: 1;
}

.center-child {
  justify-content: center;
  align-items: center;
}

.center-child:nth-of-type(odd) {
  background: lightgray;
}