flexbox - last box heigher than others - html

Question

I have a problem with flexbox. The last box in a row has more height than others. I see that if I give specific height to the boxes I will achieve the same height on the boxes but since I am trying to make responsive site I wondering it is better way to define height and not using px sizing. The boxes including images and text inside. I have tried to put % on the height but it doesn't change anything. What is the best way to use in this case to avoid many jobs in media query later? is the px the only solution?
Thank you in advance
the boxes look like this:
Code:
.footer-box {
display: flex;
justify-content: center;
width: 100%;
flex-wrap:wrap; // using wrap for wraping on smaller devices
}
.box {
text-align: center;
width:20%;
height: auto;
margin: 10px;
}
<div class="footer-box">
<div class="box box1">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box2">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box3">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
<div class="box box4">
<img src="./images/other/pic1.jpg" alt="">
<p>lorem text</p>
</div>
Thank you in advance

Answer 1

You can use flexbox and flex-direction:column for .box.
Also you should use align-items: stretch for .footer-box. Because all child items will have same heights with this code.
Lastly, through flex: 1 1 auto; we can fill with img.
And bonus: object-fit: cover is for your img sizes.
.footer-box {
display: flex;
justify-content: center;
width: 100%;
flex-wrap: wrap; // using wrap for wraping on smaller devices
align-items: stretch;
}
.box {
text-align: center;
width: 20%;
height: auto;
margin: 10px;
display: flex;
flex-direction: column;
}
.box img {
flex: 1 1 auto;
object-fit: cover;
}
<div class="footer-box">
<div class="box box1">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box2">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box3">
<img src="https://dummyimage.com/50x50/000/fff" alt="">
<p>lorem text</p>
</div>
<div class="box box4">
<img src="https://dummyimage.com/50x70/000/fff" alt="">
<p>lorem text</p>
</div>
</div>