Alignment, alignment does not work on IE11

Question

I have a simple plunker.

.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 works the way I want in Chrome 49:

But not in IE11:

I checked that IE is not in compatibility mode - it is not - it is in IE11 mode.

What's going on here?

Answer 1

This is a bug in IE11.

The min-height on a flexible container is not recognized by flex elements in IE11.

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

A simple workaround is to make the .container flexible item.

In other words, add this to your code:

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

For whatever reason, when your flex container is also a flex item, min-height rules are followed by child items.

More details here: Flexbugs: min-height on a flexible container will not be applied to its flexible elements