I'm currently working on a layout with 3 flex items in a flex container, each having equal height and width. While I've managed to achieve equal width for all 3 items, there's an issue with the first item. It contains a div (.images) that serves as another flex container with more children than the other two items' .images div. This causes the first item to have a larger height compared to the other two. Is there a way to make the height of the remaining two flex items match the height of the first item, even though they don't have the same number of children? Most solutions I found address this problem when the flex-direction is set to column, but in my case, it's set to row within the flex container.
body {margin: 0}
.flex-container {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-items {
width: 33.333%;
height: 100%;
}
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
justify-content: center;
}<div class="flex-container">
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<img src="image5.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image6.jpg" alt="">
<img src="image7.jpg" alt="">
</div>
</div>
<div class="flex-items">
<h1>Some Title</h1>
<div class="images">
<img src="image8.jpg" alt="">
<img src="image9.jpg" alt="">
</div>
</div>
</div>