After reading this answer, I attempted to adjust the size of a flex-item img element to match the height of its sibling. The height was adjusted correctly and the image shrunk accordingly while maintaining its aspect ratio, but the img element still took up the same width as if it hadn't been resized (resulting in whitespace):
main {
display: flex;
}
section {
display: flex;
flex-direction: column;
border: thin solid black;
}
img {
flex-basis: 0px;
flex-grow: 1;
object-fit: contain;
overflow-y: auto;
}<main>
<section>
<img src="http://via.placeholder.com/200x200">
</section>
<section>
<div>Adjust my height to match.</div>
</section>
</main>Current output, potentially subject to interpretation by different browsers (now or in the future):
https://i.sstatic.net/Xe5zf.png
Desired output:
https://i.sstatic.net/dqLpt.png
I also experimented with adding overflow-x: auto; or width: 100% (to the img), but it didn't have any effect. Is there a way to achieve the intended dimensions for the shrunken image within this flexbox setup?
While there are similar inquiries, none propose the aforementioned flexbox solution. Some examples include:
- Resizing flex item to accommodate an image
- Setting a flex item's height equal to its sibling's height
- Aligning the heights of flex item siblings
- Achieving equal heights for flex items [duplicate]
Therefore, if a flexbox solution proves elusive, there are alternative approaches available...