IE11: Image width 100% results in space below grid

[Jip-Hop]

I put a grid inside the Solved by Flexbox Holy Grail Layout. Inside the grid is a block level image with 100% width. It works fine in all browsers except IE11. The result is a lot of space below the grid.

The issue seems to be related to flexbox and a % width. When I set a specific width in pixels there's no such issue on IE11.

I made a codepen: https://codepen.io/anon/pen/Ovgygo.

I've removed the Navigation and Advertisements sections from the Holy Grail layout to make the example clearer. I've copied all the CSS used by https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ and only added this to the bottom:

/** IE11 Bug test styles from here on **/

.Grid-cell {
  background-color:red;
}

.Grid-cell img {
  width:100%;
  display:block;
}

Is this a known issue? If so, is there a solution or workaround? I'm sorry if this is a duplicate.

[Jip-Hop]

I see the same issue is being discussed here: philipwalton/flexbugs#75. However there doesn't seem to be a solution when the flex grid is inside another flex grid. Setting min-height: 1px won't work.

[cjwebdev]

I found that over-sized images can cause this IE bug. IE cant fit them without leaving a space.

But if I size the images down to approximately what I need. IE can digest them without freaking out.