Баг flexbox в ie, как исправить?

Question

[Дмитрий Локшин]

Привет!
Изучил баги flexbox насколько только возможно, но при первом же использовании столкнулся с такой проблемой:
при использовании у родительского элемента justify-content: center, а у дочернего margin-left: auto - контент вылазит за пределы родителя.
Ошибка наблюдается только в ie 10 - 11.

Если у родителя убрать justify-content: center, либо поменять на что-то другое, то все нормально, но мне нужно именно отцентрировать их, чтобы в дальнейшем проделать другие действия (пример сильно упрощенный, но саму проблему показывает).

Вот сам пример. Всеми любимый JsFiddle накрылся, поэтому пришлось показать в другой песочнице. В примере справа есть телефон, но он может быть сразу невидим, т.к. из-за бага скрывается справа - нужно просто увеличить область просмотра.

Кто сталкивался с такой проблемой и получилось ли решить?
Спасибо!

Comments

[Алексей Бульба]

А чем вариант с justify-content: space-between не угодил?

[Дмитрий Локшин]

Алексей Бульба, Тем, что при перестроении логотип должен отцентрироваться. Пример упрощенный, я это написал.
Да и мало ли, в дальнейшем кому-то еще понадобится использовать margin, а тут баг такой.

Answer 1

[Alexander Pushkarev]

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)

Comments

[Дмитрий Локшин]

Спасибо за ответ. Но, блин, я же написал, что хорошо изучил указанные баги на can i use, flexbugs и другие. Знаю, что некоторые браузеры поддерживают старый синтансис, некоторые работают с префиксами и т.д., поэтому для решения использую специальные инструменты, но этого бага негде нет, поэтому и спросил, может кто сталкивался и нашел обходной путь.