Space added to child of a flexbox in IE

Question

When run in IE11, the following example will add space to the bottom of the itemwrapper 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")

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

Is this a documented bug? Is there a workaround?

window.addelements = function(){
 $('<div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>').appendTo($('#itemwrapper'));
}
window.removeelements = function(){
 $('.item').last().detach();
}
window.autoelements = function(){
 $('.item').css('height', 'auto');
}
window.fixedelements = function(){
 $('.item').css('height', '50px');
}

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addelements()">add elements</button>
<button onclick="removeelements()">remove elements</button>
<button onclick="autoelements()">auto height elements</button>
<button onclick="fixedelements()">fixed height elements</button>


<div id="flexwrapper">
    <div id="itemwrapper">
      <div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>
    </div>
</div>

Answer 1

Took me a couple hours (with some help from this question), but the solution was to set overflow: hidden or overflow: auto on the immediate child of the flexed element.

It's an ugly hack (because you might have absolutely positioned elements that should render outside the container), but for my scenario it appears to be working correctly. I couldn't find another solution, so I'd be happy to see another answer.

Here's the example with the solution built in:

window.addelements = function(){
 $('<div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>').appendTo($('#itemwrapper'));
}
window.removeelements = function(){
 $('.item').last().detach();
}
window.autoelements = function(){
 $('.item').css('height', 'auto');
}
window.fixedelements = function(){
 $('.item').css('height', '50px');
}
window.nooverflow = function(){
 $('#itemwrapper').css('overflow', 'hidden');
}
window.overflow = function(){
 $('#itemwrapper').css('overflow', 'inherit');
}

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addelements()">add elements</button>
<button onclick="removeelements()">remove elements</button>
<button onclick="autoelements()">auto height elements</button>
<button onclick="fixedelements()">fixed height elements</button>
<button onclick="nooverflow()">overflow hidden</button>
<button onclick="overflow()">overflow visible</button>

<div id="flexwrapper">
    <div id="itemwrapper">
      <div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>
    </div>
</div>