Flexbox bug in IE, how to fix?

Question

css

Hey!
I studied flexbox bugs as much as possible, but the first time I used it, I encountered such a problem:
when using justify-content: center on the parent element, and margin-left: auto on the child element, the content goes beyond the parent.
The error is observed only in ie 10 - 11.
If the parent removes justify-content: center, or changes it to something else, then everything is fine, but I need to center them in order to do other actions in the future (the example is greatly simplified, but shows the problem).
Herethe example itself. Everyone's favorite JsFiddle was covered, so I had to show it in another sandbox. In the example on the right, there is a phone, but it may not be immediately visible, because because of a bug it is hidden on the right - you just need to increase the viewport.
Who faced such a problem and did you manage to solve it?
Thank you!

Answer 1

https://caniuse.com/#search=flex
IE 10 - Only supports the 2012 syntax
IE 10/11 - Partial support is due to large amount of bugs present (see known issues)