Space 添加到 IE 中 flexbox 的子项

Question

在IE11中运行时，下面的例子将space添加到itemwrapper元素的底部。在开发控制台中检查时，此 space 不归因于边距、填充或边框。测量子元素的高度似乎是一个问题，因为如果给它们一个固定的高度，那么 space 就会消失（单击 "fixed height elements"）。错误根据自动调整大小的子元素的数量复合...越多，space 增长越大（单击 "add elements"）

这不会发生在 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>

Answer 1

花了我几个小时（在 this question 的帮助下），但解决方案是在 flexed 元素的直接子元素上设置 overflow: hidden 或 overflow: auto。

这是一个丑陋的 hack（因为您可能有绝对定位的元素应该呈现在容器外），但对于我的场景来说它似乎工作正常。我找不到其他解决方案，所以很高兴看到另一个答案。

这是内置解决方案的示例：

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>

Space 添加到 IE 中 flexbox 的子项

Space added to child of a flexbox in IE

flexbox

internet-explorer-11