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

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%;}