title: Flex auto margin not working in IE10/11
body: <p>I have a complex layout where I center various elements vertically and horizontally with flexbox.</p>
  
  <p>The last element then has <code>margin-right:auto;</code> applied to push the elements left (and negate centering them).</p>
  
  <p>This works correctly everywhere except on IE10/11 and has been driving me crazy.</p>
  
  <p><strong>HTML/CSS sample:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    -ms-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
  }
  
  #second-item {
    margin-right: auto;
  }
  
  /* just some colors - not important */
  #container {
    height: 200px;
    width: 100%;
    background: red;
  }
  #container &gt; div {
    background: blue;
    padding: 10px;
    outline: 1px solid yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><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>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/anon/pen/NrWVbR" rel="noreferrer">http://codepen.io/anon/pen/NrWVbR</a></p>
  
  <p>You'll see two items on the screen that should be left-aligned on the side of the red parent (i.e. they should both be centered, but the last item has <code>margin-right:auto;</code> applied and is filling the entire line, pushing the other item and itself on the side) - this is the correct behaviour. Except in IE10/11 where both items are incorrectly centered i.e. the second item's <code>margin-right:auto;</code> is ignored.</p>
  
  <p>Any IE/flexbox experts out there that have encountered something like this before?</p>