「內聯-FLEX」項目不符合其在Internet Explorer中

Question

含量成長我已經作出了申報單的一個簡單的表結構：

$(document).ready(function() { 
 
    $("button").on("click", function() { 
 
    $(".cell").outerWidth(500); 
 
    }) 
 
})

div { 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 100%; 
 
    padding: 5px; 
 
    overflow: auto; 
 
} 
 

 
.row { 
 
    min-width: 100%; 
 
    width: auto; 
 
    display: inline-flex; 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
    border-color: red; 
 
} 
 

 
.cell { 
 
    flex: 0 0 auto; 
 
    border-right: 1px solid black; 
 
    overflow: hidden; 
 
    min-width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">x</div> 
 
    </div> 
 
</div> 
 
<button type="button">Change width</button>

該行需要垂直疊放，每個都有其內容的（未知）高度，並且至少與容器一樣寬。如果內容不合適，容器必須滾動。單元格的寬度將使用JS以交互方式更改，並且行應擴展以適合整個內容。爲此，該行具有以下樣式：

.row { 
    min-width: 100%; 
    width: auto; 
    display: inline-flex; 
} 

需要的細胞flex一部分，是這個問題的範圍之外。作爲inline元素，該行將隨所有主要瀏覽器中的內容一起增長，但不會在Internet Explorer 11中增長。檢出the fiddle並單擊按鈕以更改單元格的寬度。邊界有助於形象化行爲。下圖顯示了預期的行爲（上）和Internet Explorer如何解釋它（底部）：

什麼樣的錯誤是這（無法從the list of flexbugs看着辦吧），我怎樣才能使它在Internet Explorer中工作？

Answer 1

下面是我提出的一個解決方案，它根本不使用Flex。

更新： 簡化CSS以更好地處理邊距和填充。當您單擊按鈕使單元格變大時，由於容器的寬度固定，因此行和容器之間有無邊距。

$(document).ready(function() { 
 
    $("button").on("click", function() { 
 
     $(".cell").width(500); 
 
    }) 
 
})

html, body { width: 100%; height: 100%; margin:0; padding:0; } 
 
div { 
 
    border: 1px solid black; 
 
    /* box-sizing: border-box; */ 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    padding: 5px; 
 
    margin:10px; 
 
    background: green; 
 
    overflow: auto; 
 
} 
 
.container::after, .row::after { 
 
    content: " "; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    clear:both; 
 
} 
 

 
.row { 
 
    min-width: calc(100% - 22px); 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border-color: red; 
 
    background: pink; 
 
    float:left; 
 
} 
 
.container > *:last-child { 
 
    /* margin: 0; */ 
 
} 
 

 
.cell { 
 
    padding: 5px; 
 
    margin:5px; 
 
    border-right: 1px solid black; 
 
    overflow: hidden; 
 
    width: calc(200px - 22px); 
 
    background: orange; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">x</div> 
 
    </div> 
 
</div> 
 
<button type="button">Change width</button>

Answer 2

問題：

div { 
    box-sizing: border-box; 
} 

.cell { 
    flex: 0 0 auto; 
} 

解決辦法：

如果您不想改變CSS的這一部分，我建議你避免設置，而不是設置最小寬度寬，

$(document).ready(function() { 
    $("button").on("click", function() { 
    $(".cell").css("min-width","500px"); 
    }) 
}) 

Answer 3

在IE11的行爲是想：

默認的Flex行爲的彈性項目已更改。在因特網 Explorer 10中，彈出不符合其容器的項目已溢出容器的邊界或剪切到容器的邊界 。從IE11開始，這些項目現在縮小以適應其容器 （如果指定了最大寬度值）。使用 flex-shrink屬性可更改此行爲。

https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx

因此，下面.cell規則應該解決

.cell { 
    flex: 0 0 auto; 
    -ms-flex: 0 1 auto; /* overwrites the previous rule only in IE11 */ 
    border-right: 1px solid black; 
    overflow: hidden; 
    min-width: 200px; 
}