flex property not working in IE

Question

I have been unable to determine why flexbox is not working in IE 11.

For testing, I sourced a very simple flexbox layout from CodePen and have pasted the information below.

Chrome works as intended; IE11 fails.

Image of layout-success running on Chrome:

Image of layout-failure on IE11

body {
  background: #333;
  font-family: helvetica;
  font-weight: bold;
  font-size: 1.7rem;
}

ul {
  list-style: none;
}

li {
  background: hotpink;
  height: 200px;
  text-align: center;
  border: 2px solid seashell;
  color: seashell;
  margin: 10px;
  flex: auto;
  min-width: 120px;
  max-width: 180px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

<ul class="flex">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

http://codepen.io/hankthewhale/pen/IdKkB?editors=110

Solution 1

IE has a problem parsing the flex property.

Here are a few workarounds that have worked for me:

• Use the long-hand properties instead of the shorthand.

  Instead of something like this: flex: 0 0 35%.

  Try this:

  • flex-grow: 0
  • flex-shrink: 0
  • flex-basis: 35%

---

• Make sure flex-shrink is enabled.

  So instead of this: flex: 0 0 35%

  Try this: flex: 0 1 35%

  (In other cases flex-shrink needs to be disabled: Flex item overlaps another item in IE11)

---

• Careful with percentage and unitless values with flex-basis

  This may depend on your version of IE11. Behavior appears to vary.

  Try these variations:

  • flex: 1 1 0
  • flex: 1 1 0px
  • flex: 1 1 0%

Beware! Certain css minifiers will replace 0px with 0, which can be a really annoying thing to debug (however, they won't change 0% for some reason).

More details here:

• Image behavior within flexbox (rows embedded in columns)
• Why does shorthand flex property behave differently than long hand properties in IE?

---

• Instead of flex: 1 use flex: auto (or add in flex-basis: auto)

  If you're using flex: 1 in flex-direction: row (such as on larger screens), and you switch to flex-direction: column in a media query (let's say for mobile devices), you may find that your flex items collapse.

  In your media query, add flex-basis: auto. This will override the flex-basis value in the flex: 1 rule (which is usually 0, 0px or 0%, depending on the browser).

  Using flex: auto should also work, which is short for:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

---

• Use old-fashion width / height properties instead of flex.

---

• Use block layout instead of flex layout.

  You don't need to completely abandon flex layout. But for a particular container you may be able to get the job done with display: block instead of display: flex; flex-direction: column.

  For example, in needing to use the padding trick to responsively embed a video in a flex item, the obstacle I faced was that some browsers don't work well with percentage padding (or margin) in a flex container.

  To make it work I switched the display value on the flex item from this:

  /* a flex item, also a nested flex container */
  #footer-container > article {
      display: flex;
      flex-direction: column;
  }
  

  to this:

  #footer-container > article {
      display: block;
  }
  

Solution 2

For me, using

  flex: 1 1 auto;

instead of

  flex: 1;

solved the flex issue on IE 11.