IE11 flexbox max-width and margin:auto;

Question

I have a simple flexbox container with two items:

<div id='container'>
    <div id='first-item'>first item</div>
    <div id='second-item'>second item</div>
</div>

The first item has flex-grow: 1 and max-width to 200px. The second item has margin-left: auto; to be aligned right to the container:

  #container {
    display: flex;
  }

  #first-item {
    max-width: 200px;
    flex: 1;
  }

  #second-item {
    margin-left: auto;
  }

Here is a working demo: http://jsfiddle.net/c81oxdg9/2/

I want the first item to be aligned left and have some max-width. And the second item to be aligned right.

Works fine in Chrome, Firefox and even IE10, but not IE11. In IE11, the second item gets pushed out of the container.

How to fix this for IE11? Am I missing some property?

Answer 1

I found an answer that seems to work (though I admit I haven't tested it in IE 10): I added width: 100% to the element needing alignment. Works great in IE.

Probably too late to help you, but maybe someone else will need the solution.