How to fix flex column height bug in IE

In addition to this post/answer, if you add min-height: 1px; to both the .flex-header and the .image-container it will work in IE11 in your case as well ..

.. and I don't know why either, though according to this Microsoft bug report github post, it force IE to recalculate the sizes based on the image.

Updated fiddle

.flex-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
  min-height: 1px;
}

.image-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
  min-height: 1px;
}

Actually, it also works if you add -ms-flex-negative: 0; to both the .flex-header and the .image-container

On the parent element try to add:

display: flex;
align-items: stretch;
flex-direction: column;
min-height: 1px;
-ms-flex-negative: 0;

This works for me.