Space added to child of a flexbox in IE
<p>When run in IE11, the following example will add space to the bottom of the <code>itemwrapper</code> element. When examined in the dev console, this space isn't attributed to margin, padding or border. It seems to be an issue with measuring the height of the child elements, because if they are given a fixed height then the space disappears (click "fixed height elements"). The error compounds based on the number of auto-sized child elements... the more there are, the greater the space grows (click "add elements")</p>

<p>This doesn't happen in Chrome, Firefox or Edge... it's limited to IE11 (and, I think, IE10).</p>

<p>Is this a documented bug? Is there a workaround?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.addelements = function(){
 $('&lt;div class="item" style="height: auto;"&gt;&lt;div&gt;Account Name&lt;/div&gt;&lt;div&gt;&lt;input&gt;&lt;/div&gt;&lt;/div&gt;').appendTo($('#itemwrapper'));
}
window.removeelements = function(){
 $('.item').last().detach();
}
window.autoelements = function(){
 $('.item').css('height', 'auto');
}
window.fixedelements = function(){
 $('.item').css('height', '50px');
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#flexwrapper {
  display: flex;
  flex-direction: column;
  flex:1 1 100px;
  justify-content:
  flex-start;
  border: 4px red solid;
}

#itemwrapper {
  border: 4px green dashed;
}

.item {
  border: 4px blue solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;button onclick="addelements()"&gt;add elements&lt;/button&gt;
&lt;button onclick="removeelements()"&gt;remove elements&lt;/button&gt;
&lt;button onclick="autoelements()"&gt;auto height elements&lt;/button&gt;
&lt;button onclick="fixedelements()"&gt;fixed height elements&lt;/button&gt;


&lt;div id="flexwrapper"&gt;
    &lt;div id="itemwrapper"&gt;
      &lt;div class="item" style="height: auto;"&gt;&lt;div&gt;Account Name&lt;/div&gt;&lt;div&gt;&lt;input&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>