On Internet Explorer 11, align-items: center; do not center vertically, if our flex container have a min-height.

![IE11 flexbox center bug](/images/css-ie11-bug-flex-min-height.jpg)

A small hack to fix this issue, is to use an after on our flex-container and give it an inherit min-height:

.flex-container {
  min-height: 500px;
  display: flex;
  align-items: center;

  // See Hack - CSS target only IE11 and IE10 (media query)

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    &:after {
      content: "";
      display: block;
      min-height: inherit;
      font-size: 0;

Fix from IE11: align-items: center with min-height workaround - Github/flexbugs