IE Flexbox justify-content center overflow issue

Question

When viewing the following demo on IE11, there is an issue in which the content is displayed aligned right and pushed outside of the screen.

Codepen Demo

Here is the code that justifies the content center:

.search-results {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

You can see the issue in this screenshot here:

I'm using browserstack IE 11 on windows 10 to emulate.

It seems to be calculating the width of the flex wrapper greater than it actually is. No amount of setting max-/width on the element, HTML or body seems to fix it. I understand IE11 has some flaky support for flexbox, is there a property I'm missing? Vendor prefixes are being added by Codepen, so I should be covered on that basis.

Answer 1

Flex-basis should be set to avoid these problems in IE. Change the flex property of the ".search-results__list" to flex: 0 1 712px. Check the example below:

http://codepen.io/anon/pen/QKKpGx

IE 10-11 don’t allow unitless flex-basis values in the flex shorthand.

For more info: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/