Nested Flexbox + Images

Plnkr of my situation: http://ift.tt/2xgRAJq

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.

Expectation: the item containing the image shrinks to contain the height:100% image, the second image expands to fill the space.

Result: the item is the NATURAL WIDTH of the image and doesn't shrink, even though the image itself is smaller.

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="http://ift.tt/2hLAe55" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="http://ift.tt/2hLAe55" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="http://ift.tt/2hLAe55" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="http://ift.tt/2hLAe55" /></div>
        <div class="copy flex-fill">
          <div>Text</div>
        </div>
      </div>
      <div class="item d-flex">
        <div class="thumb flex-hold"><img src="http://ift.tt/2hLAe55" /></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%;
}