Contain a flex column of images inside a flex row

Question

I want to achieve a two-column layout with text on the left, and a column of images on the right. The column of images should be as tall as (but not taller) than the overall container for the layout. It should only take as much width as is needed to display all images in a column.

-------------------
| Text    | Image |
|         |-------|
|         | Image |
|         |-------|
|         | Image |
-------------------

However, despite multiple attempts with different markup structures, flex attributes, min-heights, max-contents etc, my image column always either overflows the container, or it doesn't shrink to take the least amount of width required, or the images are distorted.

A simplified example here: https://jsfiddle.net/e78hk42v

/* Decoration */

html {
  font-family: Inter, sans-serif;
}

main {
  padding: 20px;
}

aside {
  background: black;
  padding-left: 10px;
}

article {
  border: 10px solid black;
  margin: 0 auto;
  padding: 0;
  /* Define the size of the overall panel */
  display: flex;
  max-width: 600px;
  max-height: 90vh;
}


/* Column of images */

aside>div {
  display: flex;
  flex-direction: column;
  margin-top: -5px;
  margin-bottom: -5px;
}


/* Each image container */


/* More reliable to have containers with half-padding, than apply a margin to bare images */

figure {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

img {
  display: block;
  max-width: 100%;
}

<article>
  <main>
    <p>Hello hello hello hello</p>
  </main>

  <aside>
    <div>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
    </div>
  </aside>
</article>

How can I style this layout, so that the column of images is contained within the layout, and takes the least amount of horizontal space possible, while maintaining the aspect ratio of the images?

Answer 1

Set to aside > div { height: 100%; display: grid; grid-template-rows: repeat(3, 1fr); }.
And for img { width: 100%; height: 100%; object-fit: cover; }. Here is an example:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

article {
  --gap: 10px;
  border: var(--gap) solid black;
  margin: 0 auto;
  padding: 0;
  display: flex;
  max-width: 600px;
  max-height: 90vh;
}


main {
  padding: 20px;
}

aside {
  display: flex;
  flex-direction: column;
  padding-left: var(--gap);
  background: black;
}

aside > div {
  height: 100%;
  display: grid;
  gap: var(--gap);
  grid-template-rows: repeat(3, 1fr);
}

figure {
  min-height:0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<article>
  <main>
    <p>Hello hello hello hello</p>
  </main>
  
  <aside>
    <div>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
      <figure>
        <img src="https://picsum.photos/800/500" alt="">
      </figure>
    </div>
  </aside>
</article>