Make a flexbox row the height of shortest child element?

The goal is to have a row that is the same height as the shortest child element.

This is not something flexbox can do automatically.

You'll need to find a way to tell the container what the height is of the shortest child so it can adjust its height to match. JavaScript seems the way to go.

Take two images as examples, one has 200px height the other has 120px height. This example below works as intended when <img> elements are the direct children of the flex element.

"The example below works as intended..." I presume you mean the height of the row is the height of the shorter image (120px).

In fact, the row is 200px tall:

The shorter image is actually stretching from 120px to 200px because a default setting on a flex container is align-items: stretch, meaning that flex items will expand the full length of the cross-axis. (This is how flexbox can deliver a layout with equal height columns.)

If you override the default with, let's say, align-items: flex-start, you'll see clearly that the taller items sets the height of the container.

.row {
  display: flex;
  align-items: flex-start;  /* new */
  background: orange;
}

<div class="row">
  <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
  <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

As pointed out by @Michael_B, the first example only appears correct because of align-items: stretch.

You cannot do this with flex, or pure CSS. If we had a CSS selector which could select the shortest sibling, then we could have done this - but we don't!

You can either use a fixed height for the parent:

.row {
  display: flex;
  width: 100%;
  height: 120px; /* fixed height */
  background-color: orange;
}

<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>

Or use JavaScript to do the logic for you:

$( document ).ready(function() {
    var min_height = -1;  
    
    $("img").each(function(  ) {
        if ($(this).height() < min_height || min_height == -1) {
            min_height = $(this).height();
        }
        $('.row').height(min_height);
    })
    
    $("img").each(function(  ) {
        $(this).height(min_height);
    });
});

.row {
  display: flex;
  width: 100%;
  background-color: orange;
  align-items: flex-start
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
   <img src="https://s3.amazonaws.com/imagetest.com/purple_200.jpg" />
   <img src="https://s3.amazonaws.com/imagetest.com/teal_120.jpg" />
</div>