Flexbugs: IE11: align-items: center with min-height workaround

[pcgilday]

I believe this is related to flexbug 3, but I found the below workaround more useful in the scenario we encountered this bug.

Bug: Setting min-height breaks align-items: center in ie11. You can set height explicitly, but in some situations you want min-height not height. In our situation this was desired so that the child items can stack and increase the height if needed.

Workaround: Setting height to a value less then min-height fixes the align-items: center issue in IE11, but the container still sets its size based on min-height, effectively giving you the desired behavior.

I've tested this workaround in chrome 59, safari 10, and FF 64, and IE11, it is only needed in IE11, but works with all tested browsers.

codepen: https://codepen.io/pcgilday/pen/BdNRVO (see comments in css, uncomment line called out to see workaround)

SO response that led me to workaround: https://stackoverflow.com/a/25386261/3886141

microsoft issue: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/101414/ - this was closed as duplicate, but the duplicate mentioned is specifically for flex-direction: column, so I left a comment there with this info to see if they agree or I'm missing something.

I'm happy to open a PR with this workaround if you agree it is a acceptable for this situation. Thank you for maintaining this list, it has helped us a ton!

[SelenIT]

I just ran into the same issue (IE11/Windows 10).

@pcgilday, thanks for the workaround with smaller height! I could only find the ugly hack with adding zero-width pseudo element with the height equal to the container's min-height. Your solution looks much better!

[philipwalton]

Hmmm, really interesting solution, but it appears like this doesn't work in all cases. I tried it on my sticky footer demo and it doesn't work if the window is smaller than the content:
https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie/25386261#comment58079861_25386261

[Semdevmaster]

Very simple workaround - https://codepen.io/arsentver/pen/eywEzK?editors=1100
.flex-container{
min-height:100px;
display:flex;
align-items:center;
}
.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

[danhendrickson]

Very helpful, thank you! 👍

[Abby805]

@philipwalton I hit that issue as well. I wanted a min-height of 75vh, but sometimes the content got taller than that. I got around it with:
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 75vh;
min-height: max-content;
}

[DmitriyKurto]

@Abby805 IE11 doesn't support max-content
In my case worked only "to make your flex container also a flex item"

simple example:

.wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 40px;
}

<div class="wrapper">
  <div class="block">
    <div class="item"></div>
  </div>
</div>

[piotr-bajer]

@arsentver Thanks for the tip, I would add display: block; to :after pseudo element, without it, your code did not work on ie11 for me.

[timgao0720]

Actually, if you set min-height to a flex container, you have to set the height to it as well on IE11.
such as:

.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (.5rem * 2));
height: 100%;
}

It works for me. There is a same vertical align issue for bootstrap modal before v4.*. It already be fixed in latest version with a pseudo-class for IE11.

.modal-dialog-centered::before {
display: block;
height: calc(100vh-(.5rem*2));
content: '';
}
check here:　https://getbootstrap.com/docs/4.1/components/modal/
same issue: https://github.com/twbs/bootstrap/issues/25569

[ashikur11]

@arsentver your solution work to me very easily really great! thanks so much

[aariacarterweir]

Very simple workaround - https://codepen.io/arsentver/pen/eywEzK?editors=1100
.flex-container{
min-height:100px;
display:flex;
align-items:center;
}
.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

This just saved my life. THANK YOU!

[qmachard]

Workaround: Setting height to a value less then min-height fixes the align-items: center issue in IE11, but the container still sets its size based on min-height, effectively giving you the desired behavior.

Thanks @pcgilday, this fix is like a magic tricks :D

[binu-manoharan]

Tried a few solutions for this mentioned above to no avail. I might have got something wrong or it might just be the project set up with polyfills for IE11. Anyway what worked for me in the end for IE11 was to wrap my flex container (the parent of stuff I wanted to vertical align i.e. with align-items: center and min-height) with another flex element.

I believe DmitriyKurto suggested this as well. Thanks for that.

I've had enough flexing for one day.

[markymcfly]

Very simple workaround - https://codepen.io/arsentver/pen/eywEzK?editors=1100
.flex-container{
min-height:100px;
display:flex;
align-items:center;
}
.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

Awesome solution! 🤩👍 I only think, that the after-element is missing display: block. Otherwise it ain't getting set and the changes won't apply.

[piotr-bajer]

In a similar issue setting height to 0 did the trick to me:

.foo {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  height: 0;
}

@yevgenysim this solution does not allow the container to expand when the child is higher than 500px. It is the same as if you just set height: 500px

[AndyOGo]

Thank you @pcgilday, this is great. Works like a charm, even height: 1px; 🤦

To avoid any unexpected issues with other browsers I would limit this to IE10 and 11 only, like:

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: gray;
  min-height: 4em;

  height: 2em;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .container {
      height: 1px;
    }
}