How to achieve equal height image columns that shrinks - html

Question

I want to achieve a grid-like layout where every column in a row has the same height. Each column contains a picture so it must also keep the proportions of the image.
The current solution is to set the flex-grow property to the ratio of the image. This works but can result in very large images which is not desired in my case.
I would like the images to shrink to fit on one row in the case of negative space left.
The flex-shrink property works similar to the flow-grow property. The negative space will be distributed between the items based on the flex-shrink property.
However there is a caveat in the flex-shrink behaviour: the item will never shrink to a size less than the content of it. In my case that means the column will never shrink to a size less than the images it contains.
I can work around the problem by setting the flex-basis property to a smaller value. I've played around with this but either messed up the wrapping or the equal heights.
What I would like to happen:
Consider the following markup:
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
}
.img-container {
padding: 5px;
box-sizing: border-box;
flex-basis: auto;
}
.img {
width: 100%;
height: auto;
}
<div class="container">
<div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div style="flex-grow: 1; flex-shrink: 1;" class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div style="flex-grow: 2; flex-shrink: 2;" class="img-container">
<img class="img" src="https://via.placeholder.com/400x200/" alt="">
</div>
</div>
The sum of the width is 200+200+400=800px which means there is 800-600=200px negative space. The flex-shrink values dictates that item one and two gets 1 part of the negative space and that item three gets 2 parts.
Calculating this gives us:
Width to remove from item one: 1/4*200=50
Width to remove from item two: 1/4*200=50
Width to remove from item three: 2/4*200=100
These widths are correct and would keep the correct ratios but as I mentioned earlier this cannot be achieved since the flex-basis is the natural width of the image elements.
Do you guys have any suggestions on how to solve this problem?

Answer 1

If you set the width of your .container and the height of your .img-container it should work.
Now you only have to decide how you want to space your images. .container { justify-content: space-evenly/space-between/space-around}
.container {
display: flex;
flex-wrap: wrap;
width: 600px;
justify-content: space-evenly;
}
.img-container {
padding: 5px;
box-sizing: border-box;
flex-basis: auto;
height: 150px;
}
.img {
width: auto;
height: 100%;
}
<div class="container">
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/400x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/400x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/400x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
<div class="img-container">
<img class="img" src="https://via.placeholder.com/200x200/" alt="">
</div>
</div>