How do I limit image height to height of another flexbox column? - html

Question

I have a flexbox layout with two columns. Column one contains an image, at design time the aspect ratio of the image is unknown. I want to display the whole image while maintaining its aspect ratio. Column two contains several lines of text, length is unknown at design time. The container should not have a fixed height.
How can I maximize the space available in column one for the image, without the image height exceeding the height of (the text in) column two?
In the code snippet below I want the height of the black image to be less than or of the same height as the right column with 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>

Answer 1

You could have an average result via height:0; + min-height:100% , but parent's width will hardly be update .
.row {
display: flex;
padding: 5px;
margin: 5px;
background-color: blue;
justify-content:start;
}
.col1 {
flex: 1 1 auto;
background-color: yellow;
align-self: stretch;
}
.col2 {
background-color: lightgray;
padding: 10px;
flex:1 0 auto;
}
img {
height:0;
min-height: 100%;
min-width: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>

Answer 2

To achieve this kind of result you need to have one of the column's widths fixed.
In the below example I have fixed the width of the image to 256px.
.row {
display: flex;
padding: 5px;
margin: 5px;
align-items: flex-start;
background-color: blue;
}
.col1 {
flex: 0 0 256px;
background-color: yellow;
}
.col1 > img {
width: 256px;
}
.col2 {
flex: 1;
background-color: lightgray;
padding: 10px;
}
<div class="container">
<div class="row">
<div class="col1">
<img src="https://dummyimage.com/600x600/000/fff">
</div>
<div class="col2">
<p>Here's some text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
<p>And some more text</p>
</div>
</div>
</div>