Nested Flexbox + Images - html

Question

Plnkr of my situation: https://plnkr.co/edit/ppuUhrWB08ULGuFT4tXn
I recommend popping out the results window.
I have a vertical flex container that contains two items. The second item is also a vertical flex container. It contains several items that are horizontal flex containers. These horizontal containers contain two items. One of the items contains an image, set to height:100%. The other item is set to fill remaining space.
Visual Representation
grey = top-level vertical flex container
turquoise = fixed item
green = second vertical flex container
yellow = horizontal flex-container
red = flex item containing image
dark purple = image
magenta = flex item designated to fill empty space
Expectation: the item containing the image shrinks to contain the height:100% image, the second image expands to fill the space.
Actual Result: the item is the NATURAL WIDTH of the image and doesn't shrink, even though the image itself is smaller.
Visual Representation:
I've also tried not putting the img inside a container and letting it just be a flex item, but then height:100% makes the image as big as the vertical flex container because ¯\_(ツ)_/¯
I'm not sure how to go about resolving this issue.
HTML:
<div class="body-container">
<div class="body flex-column">
<div class="header flex-hold w-100">
I AM A HEADER
</div>
<div class="long-content flex-column w-100 flex-fill d-flex">
<div class="item d-flex">
<div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
<div class="item d-flex">
<div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
<div class="item d-flex">
<div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
<div class="item d-flex">
<div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
<div class="item d-flex">
<div class="thumb flex-hold"><img src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" /></div>
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
height:100vh;
margin:0px;
padding:0px;
}
div {
display:inline-block;
}
.d-flex {
display:flex;
}
.flex-column {
flex-direction:column;
}
.body-container {
height:100%;
}
.body {
display:flex;
height:100%;
flex: 1 1 auto;
}
.flex-hold {
flex: 0 0 auto;
}
.flex-fill {
flex: 1 1 auto;
}
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
.header {
}
.long-content {
background-color:#ffff00;
}
.item {
margin:4px;
background-color:#ccc;
flex: 1 1 auto;
}
.thumb {
display:block;
}
img {
height:100%;
}

Answer 1

I found a solution that works for my specific situation but not entirely sure how applicable it is in the wild. Mostly inspired by this question: https://stackoverflow.com/a/15389545/1857860
I reorganized the html of my horizontal container like so:
<div class="item d-flex flex-fill">
<div class="inner-wrapper">
<div class="d-flex h-100 w-100">
<!--<div class="thumb flex-hold">-->
<img class="h-100 flex-hold" src="https://animatedanatomy.com/images/16-9-dummy-image6.jpg" />
<!--</div>-->
<div class="copy flex-fill">
<div>Text</div>
</div>
</div>
</div>
</div>
So, I made my horizontal flex container relative, then inserted two wrapper elements. The first wrapper (inner-wrapper) is position:absolute, height:100%, width:100%. The second wrapper is just another horizontal flex container. Something about putting a flex container inside the absolute container "resets" what it considers to be height 100% for child elements. So, after that all I had to do was remove the container around my image and set it to height:100% and flex: 0 0 auto;