I am struggling to create a two-column layout with text on the left and a column of images on the right. The images should be the same height as the container and only take up the necessary width. Unfortunately, my attempts with various markup structures, flex attributes, min-heights, and max-content have been unsuccessful. The image column either overflows the container, doesn't shrink to the minimum width needed, or distorts the images.
For reference, please see this simplified example: 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>Does anyone have any suggestions on how to style this layout so that the images column fits within the container and uses the minimum horizontal space while preserving the image aspect ratio?