Say I have a flexbox with 3 elements:

First child has 4-7 lines.
Second child has 40-50 lines.
Third child has 2-5 lines.

I want to set the second child’s height to match the same as the first child.

I know I can set the height: 300px or some static value, but the content might be shorter or longer.

Here’s an example (I want the second child [green box] to be the same height of the first child [purple box]:

flexbox example

I’ve tried several ways unsuccessfully (like flex-shrink). Here’s part of the code:

<div class="parent">
    <div class="child1 child">
    This div has dynamic amount of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> 
    <div class="child2 child">
    This div has a lot of lines... <br>line 1 <br> line 2 <br/>line 3 <br> line 4 <br> line 5<br/> line 6 <br> line 7 <br/>line 8 <br> line 9 <br> line ...<br/> 
    <div class="child3 child">
    some other div <br> 1 <br>2 <br/> 3 <br> 4

.parent {
  background-color: red;
  display: flex;
  flex-direction: row;
  gap: 1rem;

.child {
  width: 33.3333333%;
  font-size: 2rem;
  // height: 300px; // this works but then the height would not match the first child's

.child1 {
  display: flex;
  background: purple;

.child2 {
  background: green;
  overflow: scroll;


.child3 {
  background: grey;

I have considered using js to get the height of the first child and applying it to the parent, but is there a way to do this via css only?