Make flex items use 100% height of parent with flex-direction: row - html

Question

So I am attempting to have 3 flex items with equal height and width inside a flex container. I am successful in making the 3 flex items have equal width. However, the first flex-item has a div (.images) that is also a flex container which contains a few more children than the other 2 flex items' (.images) div. This results in the height of the 1st flex-item to be larger than the other 2. How do I make the height of the other 2 flex items have the same height as the first, even though they do not have the same amount of children? I researched this issue, but I only found answers when the flex-direction property is set to column. In my case the flex-direction property is 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>

Answer 1

You need to give the images inside .images a height of 100% and a width of auto - if you want them to scale proportionately, like so:
.images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%; (images is getting 100% height, but nothing is telling its children to go up in height)
justify-content: center;
}
.images img { (address the children)
height:100%;
width:auto;
}

Answer 2

If you don't set images width and height they will use auto, and scale it from that for the flex box depending on what browser your on of course.
Images can be manipulated inline or using css by using the height or width property, an example of both is below.
Inline Example 1:
<img src="#.png" width="auto" height="100%" />
Css Example 2:
div.images > img {
height: 100%;
width: auto;
}
It is also good idea to optimize images for your web page and not to rely on auto scaling for the best results. After all you are the one that knows what the end result should be.
:)