How to make blocks on all lines the same height in flex when using wrap?

Question

css

It turns out that for each row its own maximum height of the row element is taken. You can manually set the height but the content is dynamic. You can also write a script that will go through all the elements and set them to a certain height, but this is some kind of crutch.

<div class="parent">
  <div class="child"><div style="height:50px"></div></div>
  <div class="child"><div style="height:35px"></div></div>
  <div class="child"><div style="height:40px"></div></div>
  <div class="child"><div style="height:55px"></div></div>
  <div class="child"><div style="height:80px"></div></div>
  <div class="child"><div style="height:60px"></div></div>
</div>

div.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 800px;
}

div.child {
  margin: 4px;
  display: flex;
  width: 250px;
  background-color: grey;
}

https://codepen.io/liong2/pen/gOOeMwX

Answer 1

Grids to use

Answer 2

div.parent add property align-items: stretch.

div.parent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 800px;
}