I am working with a flexbox layout that has two columns. The first column contains an image, and the aspect ratio of the image is unknown at design time. My goal is to display the full image while preserving its aspect ratio. The second column consists of multiple lines of text, the length of which is also unknown during design. It is important that the container does not have a fixed height.
My question is, how can I utilize the space in the first column for the image without allowing the height of the image to exceed the height of the text in the second column?
In the code below, I want to ensure that the black image's height is either less than or equal to the height of the right column with a gray background; it should never be taller.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex-grow: 1;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
min-width: 300px;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
}<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/256x256/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>