在IE中添加到Flexbox的子項的空間

Question

在IE11中運行時，以下示例將在itemwrapper元素的底部添加空間。在開發控制檯中檢查時，此空間不屬於邊距，填充或邊界。測量子元素的高度似乎是一個問題，因爲如果給定了固定高度，那麼空間消失（點擊「固定高度元素」）。基於自動調整子元素數量的錯誤複合...越多，空間越大（單擊「添加元素」）

在Chrome，Firefox或Edge中不會發生這種情況。它僅限於IE11（並且我認爲，IE10）。

這是一個記錄的錯誤？有沒有解決方法？

window.addelements = function(){ 
 
\t $('<div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>').appendTo($('#itemwrapper')); 
 
} 
 
window.removeelements = function(){ 
 
\t $('.item').last().detach(); 
 
} 
 
window.autoelements = function(){ 
 
\t $('.item').css('height', 'auto'); 
 
} 
 
window.fixedelements = function(){ 
 
\t $('.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一些幫助），但解決的辦法是設置overflow: hidden或overflow: auto在彎曲元素的直接孩子。

這是一個醜陋的黑客（因爲你可能有絕對定位的元素，應該在容器外渲染），但對於我的情況，它似乎工作正常。我找不到另一個解決方案，所以我很樂意看到另一個答案。

下面是與解決方案的例子建於：

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