flex property not working in IE

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.