Imagine a flexbox with 3 elements:
The first child contains 4-7 lines. The second child contains 40-50 lines. The third child contains 2-5 lines.
My goal is to make the height of the second child match that of the first child.
I am aware that I could set the height: 300px or some fixed value, but the content length varies.
Here's a visual example (I want the second child [green box] to have the same height as the first child [purple box]:
https://i.sstatic.net/wNL0v.png
I've attempted various methods unsuccessfully (such as using flex-shrink). Here's a snippet of the code:
I have thought about using JavaScript to determine the height of the first child and applying it to the parent, but is there a CSS-only solution?
.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;
}<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>
<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>
<div class="child3 child">
some other div <br> 1 <br>2 <br/> 3 <br> 4
</div>
</div>