Flexbox and object-fit fail in some browsers

Question

In the example below I have a container with a known height, which has several children vertically aligned.

Some of those children have a variable height and one particular child element (the one with the image in this example) should consume the rest of the height.

Without the image this is easy to build with flexbox, but together with the image having object-fit: contain it breaks in some browsers.

I've successfully tested this in recent Chrome, Safari and iOS 11.2. However it breaks in Firefox and iOS 10.3.

I'd appreciate any hints very much.

https://codepen.io/smichaelsen/pen/pLozmg

.wrap {
  background-color: purple;
  color: white;
  width: 300px;
  height: 400px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.wrap div {
  outline: 1px dotted grey;
}

.c {
  flex-basis: 100%;
  display: inline-flex;
}

.c img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

<div class="wrap">
  <div class="a">a little space</div>
  <div class="b">a little bit more space. The height of this section is variable.</div>
  <div class="c"><img src="https://placeimg.com/480/640/any" /></div>
  <div class="d">a little space</div>
</div>

<p>The container of the image consumes the remaining height and the image fits the available space nicely.</p>

<p>This works great in recent Chrome and Safari. ✅</p>

<p>This breaks in Firefox. ❌</p>

<p>If you have any ideas, feel free to share them <a href="https://stackoverflow.com/questions/49175066/vertical-flexbox-and-object-fit-fail-in-some-browsers">here</a>.</p>