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 { f

Solution 1:

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