Flex auto margin not working in IE10/11

Question

I have a complex layout where I center various elements vertically and horizontally with flexbox.

The last element then has margin-right:auto; applied to push the elements left (and negate centering them).

This works correctly everywhere except on IE10/11 and has been driving me crazy.

HTML/CSS sample:

#container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -ms-flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

#second-item {
  margin-right: auto;
}

/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: red;
}
#container > div {
  background: blue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
</div>

http://codepen.io/anon/pen/NrWVbR

You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has margin-right:auto; applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's margin-right:auto; is ignored.

Any IE/flexbox experts out there that have encountered something like this before?

Hi, margin auto is problematic in IE11 (See other answer for more details on why.) Fix: Consider using align-items or justify-content. — ErvTheDev
– ErvTheDev, Commented Feb 8, 2021 at 17:39

Craig · Accepted Answer · 2018-03-21 17:03:05Z

79

This appears to be an IE bug.

According to the flexbox specification:

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

In other words, auto margins take precedence over justify-content.

In fact, if an element has auto margins applied, then keyword alignment properties such as justify-content and align-self have no effect (because the auto margins have taken all the space).

Your code works as expected in Chrome and Firefox because those browsers are in compliance with the spec.

IE10 and IE11 appear to not be in compliance. They are not applying the auto margin as defined in the spec.

(Note that IE10 is built on a previous version of the spec.)

Solutions

Method #1: Use auto margins only

If justify-content is removed, auto margins work fine in IE10/11. So don't use justify-content. Use auto margins all the way through. (See examples of alignment with auto margins).

Method #2: Use an invisible spacer div

Create a third div with visibility: hidden and flex-grow:1. This will naturally shift #first-item and #second-item to the left edge, with no need for auto margins.

#container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#third-item {
  flex-grow: 1;
  visibility: hidden;
}
/* just some colors - not important */
#container {
  height: 200px;
  width: 100%;
  background: pink;
}
#container > div {
  background: cornflowerblue;
  padding: 10px;
  outline: 1px solid yellow;
}

<div id='container'>
  <div id='first-item'>first item</div>
  <div id='second-item'>second item</div>
  <div id='third-item'>third item</div>
</div>

edited Mar 21, 2018 at 17:03

Craig

7723 gold badges14 silver badges26 bronze badges

answered May 31, 2016 at 1:33

Michael Benjamin

377k110 gold badges620 silver badges742 bronze badges

Sign up to request clarification or add additional context in comments.

Harvey A. Ramer Over a year ago

Why not just remove the auto margins and keep justify-content?

Roy Tinker Over a year ago

Solution for me was to switch to align-self: center; instead of margin: 0 auto; on flex child elements.

Sheffie Over a year ago

How come the visibility of the "filler" #third-item is being set to hidden ?

Anonymous Over a year ago

This answer is mentioned in the bootstrap documentation.

Collectives™ on Stack Overflow

Flex auto margin not working in IE10/11

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related