Flex auto margin not working in IE10/11

by

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>

More Related Contents:

  1. Text in a flex container doesn’t wrap in IE11
  2. CSS flexbox not working in IE10
  3. element not working in Internet Explorer 11
  4. Icon fonts not loading in IE11
  5. CSS Blur in IE 11
  6. Detecting IE version using CSS Capability/Feature Detection
  7. Make a div span two rows in a grid
  8. Better way to set distance between flexbox items
  9. What’s the difference between align-content and align-items?
  10. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  11. How to change flexbox wrap?
  12. @font-face EOT not loading over HTTPS
  13. Create a Masonry grid with flexbox (or other CSS)
  14. css grid of squares with flexbox
  15. Set flexbox children to have different heights to use up available space
  16. Flexbox column-reverse in Firefox, Edge and IE
  17. Does IE 8 have a limit on number of stylesheets per page?
  18. CSS: Using raw svg in the URL parameter of a background-image in IE
  19. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  20. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  21. How to make Google Fonts work in IE?
  22. The difference between flex:1 and flex-grow:1
  23. Flexbox on IE11: image stretched for no reason?
  24. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  25. How to control number of items per row using media queries in Flexbox?
  26. How to stretch children to fill cross-axis?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Do I not understand the flex-grow property?
  29. with an inner not triggering :active state in IE 8
  30. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera

Leave a Comment