Flexbugs: IE11: single flex item with margin auto gets shifted to flex end

[b-strauss]

In IE11 a single flex item that is centered on both axis gets shifted to the end of the flex container if it also has margin: auto;

see: https://jsfiddle.net/50zbfq0p/

this seems to be fixed in Edge.

solution for IE: remove auto margin

[philipwalton]

Interesting, it seems like it tries to apply the margin _in addition_ to the justification from the parent.

It's probably a best practice in general to either use margin for centering or to use the parent justify-content and align-items properties, but not both.

[sk1981]

I encountered a similar issue and also had to avoid margin: auto. I agree with the workaround/best practice to avoid using margin: auto along with justify-content for all scenarios.

Would like to add to the above discussion: margin: auto in IE is very unreliable. Issues can happen even if more than one element is present and even if non-center values for justify-content is used.
This issue is also present in UC Browser.

Here is a demo with 3 items and with justify-content: flex-end - https://jsfiddle.net/csz3uuuh/5/
(The items 2 and 3 gets shifted out of the box in IE).

In my case, I was trying to align the second content at the bottom and the first content at the center of remaining space using margin:auto. I had to fix it by removing auto margins and calculating the margin values using calc.

I did spent a bit of time on this as it was not on the the homepage, and will be happy to submit the documentation for this. Just let me know what needs to be done.

[weberjacob]

Ran into this issue as well today. I was able to target just IE with a media query for the issue to not mess with other applied styling to other browsers.
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { // your code }