How do you get images to scale responsively within a flex box?

Question

I've created an example of the problem here: https://codepen.io/83alimac/pen/rNQwGwe

with this code:

.row {
      display: flex;
      align-items: center;
    }
    
    img {
      max-width: 100%;
      height: auto;
      margin-right: 20px;
    }

<div class="row">
      <img src="https://picsum.photos/id/237/500/200" />
      <img src="https://picsum.photos/id/237/500/200" />
      <img src="https://picsum.photos/id/237/500/200" />
 </div>

I'm using bootstrap, and have a row of images in a container that I want to scale down responsively as the container shrinks with the viewport. The problem is that the images remain fixed in size as the viewport changes. I've mimicked the 'img-fluid' class by setting all the images to 'max-width: 100%' and 'height: auto'

How do I get the images to scale responsively?

You can see in the codepen I created, that when it gets to the width of the first image, it locks the viewport, and none of the images scale.

I'm not sure what's going on but is it possible to get this to work? This is what I want to happen: