flex使用時のmarginの調整がIEでも利くようにしたい

Question

前提・実現したいこと

flexレイアウトでmarginを使用して位置調整をしようとすると、IEでだけ理想の表示にならないことに気づきました。
具体的には以下のようにしたいと思っています（上が現在のレイアウトで下が理想のレイアウトです）

試したこと

「#globalNavigation .gnav 」に「margin-right:100px」を入れたらIE以外でのブラウザは理想の表示になりましたが、IEで表示がおかしいので削除。
flexアイテムではなくその子要素であればIEでの問題は発生しないとの情報を見つけ、疑似要素の使用を試みましたが、これもうまくいきませんでした。
削除済みですが、具体的には以下のコードを記述しました。

li.cntmenu::after {
display: block;
margin-right: 100px;
content: '';
}

該当のソースコード

長くてここには投稿できなかったのでjsfiddleを使いました↓
https://jsfiddle.net/cznk2eta/3/

Answer 1

IE11の定番バグとその対応方法 | キオミルブログ

を参考にやってみて下さい。

また、上記リンクの手法を活かすなら、
右の一覧は、もう一回層下に配置する必要がありそうです。

Comments

[miyabi_pudding]

また、flex-shrinkプロパティも上手く使わないとできなさそうな予感がします。

[mupo]

参考にいただいたURLのCSSハックを試して、上手くいかなかったのでCSSハックについて少し調べていたら、偶然にも全く同じ現象を解説しているサイトを見つけることができ、修正することができました（https://blog.webico.work/flexbox-ie11）
ありがとうございました。