How do you make each image in a flexbox row of images the same height all the time?

Question

I have five images; each one represents a logo. I have made each one the same height in pixels, but they all have varying widths. I want to display them in a flexbox in such a way that all five images always have the same height relative to each other, and I want them to be able to scale (by the same amount) to fit the space. Right now, each image is a different height, but the same width. I want the opposite: same height/different width. Here is a CodePen showing the problem: https://codepen.io/krishunt/pen/YzoygxP

<div class="container">
  <div class="flex-container">
    <div><img src="https://www.toprival.com/temp/flexbox-test/one.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/two.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/three.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/four.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/five.webp" /></div>
  </div>
</div>

.container {
  width:80%;
  border:1px solid gray;
  padding:30px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
}

.flex-container > div {
  margin: 0 10px;
  flex: 1 1 50px;
}

.flex-container > div > img {
  width: 100%;
}

Answer 1

To fix your problem you need to first add a height property to .flex-container>div>img to maintain the images aspect ratio. You should also removed the properties in your .flex-container > div block because they are causing problems with the sizing of your image heights. To ensure that a gap still remains between the elements, you can add a gap property to your .flex-container block.

.container {
  width: 80%;
  border: 1px solid gray;
  padding: 30px;
  margin: 0 auto;
}

.flex-container {
  display: flex;
  gap: 1rem; /* Added gap property to ensure spacing */
}

.flex-container>div>img {
  width: 100%;
  height: auto; /* Added to preserve aspect ratio */
}

<div class="container">
  <div class="flex-container">
    <div><img src="https://www.toprival.com/temp/flexbox-test/one.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/two.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/three.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/four.webp" /></div>
    <div><img src="https://www.toprival.com/temp/flexbox-test/five.webp" /></div>
  </div>
</div>