Пространство, добавленное к дочернему элементу flexbox в IE

При запуске в IE11 следующий пример добавит пробел в конец элемента itemwrapper. При проверке в консоли dev это пространство не относится к марже, заполнению или границе. Кажется, что проблема связана с измерением высоты дочерних элементов, потому что, если им задана фиксированная высота, пространство исчезает (нажмите "фиксированные элементы высоты" ). Соединения ошибок основаны на количестве дочерних элементов с автоматическим размером... чем больше есть, тем больше увеличивается пространство (нажмите "добавить элементы" )

Это не происходит в Chrome, Firefox или Edge... он ограничен IE11 (и, я думаю, IE10).

Является ли это документированной ошибкой? Есть ли способ обхода?

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>

Ответ 1

Мне понадобилось пару часов (с помощью этого вопроса), но решение заключалось в том, чтобы установить overflow: hidden или overflow: auto на непосредственный дочерний элемент сгибаемый элемент.

Это уродливый взлом (потому что у вас могут быть абсолютно позиционированные элементы, которые должны визуализироваться вне контейнера), но для моего сценария он работает правильно. Я не мог найти другого решения, поэтому я был бы рад увидеть другой ответ.

Вот пример с решением, встроенным в:

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>

Ответ 2

У меня была такая же проблема, везде искал ответ, спасибо за ваш вопрос, "переполнение: скрытый" мне тоже помог!