css - Flexbox, min-height, margin auto and Internet Explorer

Question

I use to play with both display: flex and margin: auto to have this kind of layouts:

This works well on every browser supporting Flexbox, even IE.
However, it would have been too easy if there hadn't had a little exception: min-height.

You can find a simple working example here. When using min-height on my wrapper, the last element is not pushed to the bottom of this wrapper (IE only).

I can't get this to works, do you girls/guys have any idea? Thanks.

Testing on IE11

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  
  border: 1px solid grey;
  padding: 5px;
}
.element {
  height: 35px;
  
  border: 1px solid grey;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 1

This is a bug in IE's flexbox implementation:

In all other browsers that support flexbox, a flex-direction:column based flex container will honor the containers min-height to calculate flex-grow lengths. In IE10 & 11-preview it only seems to work with an explicit height value.

Bug report - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

It appears that this is on Microsoft's radar and will be fixed some point in the future:

Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.

Reply from Microsoft - (https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview#tabs)

For now the simple solution is to use height:

.wrapper {
  border: 1px solid grey;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 300px;
  padding: 5px;
}
.element {
  border: 1px solid grey;
  height: 35px;
  margin: 5px;
}
.element:last-child {
  margin-top: auto;
}

<div class="wrapper">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>