Search code examples
htmlcssflexboxinternet-explorer-11

align-items, align-self not working on IE11

I have a simple plunker here. 

.container {
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: 4em;
}

.nav {      
  flex: 0 0 4em;
  height: 1em;
}

.logo {
  flex: 1 0 auto; 
  align-self: stretch;
}

This is working how I want it to in Chrome 49:

enter image description here

But not in IE11:

enter image description here

I have checked that IE isn't in compatability mode - it's not - it's in IE11 mode.

What's going on here?

Solution

  • This is a bug in IE11.

    The min-height property on a flex container isn't recognized by flex items in IE11.

    If you switch to height: 4em, you'll see that your layout works.

    A simple workaround is to make .container a flex item.

    In other words, add this to your code:

    body {
    display: flex;
}

.container {
    width: 100%; /* or flex: 1 */
}

    For whatever reason, by making your flex container also a flex item, the min-height rule is respected by the child elements.

    More details here: Flexbugs: min-height on a flex container won't apply to its flex items