How to get the same margin behavior in ie11?

Question

I'm having a problem on my website where it's displayed correctly in both Chrome, Firefox as well as mobile browsers but displayed incorrectly in ie11. I've used a flexbox to center everything and used auto margins on some of the elements and those margins don't seem to behave the same way in ie.

I've made a small example in jsfiddle : https://jsfiddle.net/pkr63z1c/1/

.container {
  height:500px;
  width:500px;
  background-color:white;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.blue {
  background-color:blue;
  width:50%;
  height:10%;
  margin-top:auto;
}

.red {
  background-color:red;
  width:50%;
  height:10%;
  margin-bottom:auto;
}

In both chrome and firefox, the red and blue div are centered, while in ie they're on the bottom of the parent div. This is similar to the problem I have on my website so I'm hoping someone knows how to get the same behavior on ie.

Thanks

Removing `margin-top` and `margin-bottom` seems to solve the issue. See [live demo](https://jsfiddle.net/pkr63z1c/2/). Why do you need margins in the first place? — Marat Tanalin, Jun 06 '16 at 21:54
with IE here ; justify-content and margin for children are in conflicts (column). Use one orthe other not both together https://jsfiddle.net/pkr63z1c/4/ — G-Cyrillus, Jun 06 '16 at 22:05
possible duplicate: http://stackoverflow.com/q/37534254/3597276 — Michael Benjamin, Jun 06 '16 at 22:29
@MaratTanalin It was the simplest example I could make to show there was a difference in behavior. — user3768912, Jun 07 '16 at 14:14
@GCyrillus This was the problem, justify-content was not needed and caused problems on ie. Thanks ! — user3768912, Jun 07 '16 at 14:15

How to get the same margin behavior in ie11?

0 Answers0