I have two flex columns, one containing text and the other containing an image. I want the image to fill its column entirely, to the same height as the bottom of the text, and I don't mind if the image is cropped, either horizontally or vertically to accommodate this. I don't want the columns to stretch vertically to be any taller than the text itself.
The problem with my current code, as you can see here, is that when the image is larger than the image wrapper, even with overflow:hidden, the flex container adjusts the height of both flex columns to the full height of the image, rather than to the height of its parent div, the '.image-wrapper'. Currently I'm solving the problem using jquery (not shown here), which feels a bit hacky. The other solution is to just get rid of the flexbox entirely and use the float columns method with overflow:hidden, which works fine - but I was wondering if there's a more elegant solution, that uses flexbox, and doesn't use jquery?
.flex-container{
width:500px;
display:flex
}
.flex-column{
flex: 1 1 0px;
padding: 10px;
min-width: 0;
}
.fc-one{
background-color:red;
}
.fc-two{
background-color:green;
}
.flex-column .image-wrapper{
max-width:100%;
max-height:100%;
overflow:hidden;
}
.flex-column .image-wrapper img{
height:500px;
width:auto;
}
<div class="flex-container">
<div class="flex-column fc-one">
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<div class="flex-column fc-two">
<div class="image-wrapper">
<img src="https://i.imgur.com/CFCPCoA.jpg">
</div>
</div>
</div>