title: IE11 flexbox max-width and margin:auto;
body: <p>I have a simple flexbox container with two items:</p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;div id='first-item'&gt;first item&lt;/div&gt;
      &lt;div id='second-item'&gt;second item&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>  #container {
      display: flex;
    }
  
    #first-item {
      max-width: 200px;
      flex: 1;
    }
  
    #second-item {
      margin-left: auto;
    }
  </code></pre>
  
  <p>Here is a working demo:
  <a href="http://jsfiddle.net/c81oxdg9/2/">http://jsfiddle.net/c81oxdg9/2/</a></p>
  
  <p>I want the first item to be aligned left and have some max-width. And the second item to be aligned right.</p>
  
  <p>Works fine in Chrome, Firefox and even IE10, but not IE11.
  In IE11, the second item gets pushed out of the container.</p>
  
  <p>How to fix this for IE11? Am I missing some property?</p>