This is driving me insane. I have a grid container with this grid-template-areas:

title title
images description

My objective is to make images have the same height of description. Currently, images can be much larger if the image src is very tall vertically.

The html is more or less structured like this:

<article style="display: grid">
  <div class="title">There are many other articles like this one on the page</div>
  <div class="images">
     <img>
     <img>
  </div>
  <div class="description">The description of the thing</div>
</article>

Setting the CSS for img {max-width: 100%;} gets me exactly what I want, as long as the image is not too big vertically. If the image is vertically big, then the .images div gets expanded too much, to cover all of the 100% width image, and then it dwarfs the .description div to the right of it.

Most answers I saw here in SO mention setting max-height: 100%, but it makes no difference in my case. Others suggested putting img as background to a div, but this seems like a hack.

I tried making the .images container a flexbox, but also made no difference in constraining the vertical size.

What worked best so far was setting img {max-height: 50vh}, but it’s not exactly the same as making .images have the same height of .description.

How can I make the images img container have the same height as the description div?