How to make equal height of few flex-direction columns?

Question

I'm struggling to make equal flex-box flex-direction column rows. Most of the code is added below. I am trying to deal with it through a long time already and I certainly would appreciate a help.

My code:

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Jan Kowalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        John Kowalsky
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        email@example.com
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Tester
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>

The problem is visualized in jsfiddle: https://jsfiddle.net/xp7cs5ag/

The question is - how to make equal height of every row in each column?

Answer 1

You could achieve this with display: grid (instead of flex) for the outer .table__cell. With grid-template-rows: 1fr 1fr 1fr; you define that each row should have an equal height. You could also define fixed values like px.

Working example:

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Mariusz Bocz
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Feliks Michalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        programista@tech-studio.pl
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Programista
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>

---

If you want the grid-items to be centered you could use align-items: center.

Working example:

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Mariusz Bocz
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Feliks Michalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        programista@tech-studio.pl
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Programista
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>