如何阻止IE11將這兩條線路放在一起？

Question

我只有IE11的問題（Chrome + FF可以正常工作），其中2行將在對方的「頂部」進行。

這裏的鏈接： https://jsfiddle.net/3L2bx9w9/2/

HTML：

<div> 
    <label>first line first line first line first line</label> 
    <div> 
    <div class="content"> 
     <div class="contentFieldset"> 
     <div class="inner"> 
      second line second line second line second line 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

<div> 
    <label>first line first line first line first line</label> 
    <div> 
    <div class="content"> 
     <div class="contentFieldset"> 
     <div class="inner"> 
      second line second line second line second line 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.content { 
    display: flex; 
    flex-direction: row; 
    height: 100%; 
} 

.contentFieldset { 
    flex: 1; 
    -ms-flex: 1; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
} 

.inner { 
    display: flex; 
    flex-direction: row !important; 
    flex: 1; 
    -ms-flex: 1; 
    min-width: 0; 
} 

這種嵌套結構需要我的設置（我已經明顯簡化了它在這個例子中），它的工作原理是如果頂部的div設置了靜態高度（例如250px），但我需要它來填充可用空間。

有誰知道一種解決方法，我可以使用它來使其工作，而不移動flexbox或說不使用IE？謝謝。

Answer 1

答：

無論出於何種原因，它出現在-ms-flex線必須設置爲1 0 auto;而不是僅僅1。因此，修正CSS看起來像：

.content { 
    display: block; 
    flex-direction: row; 
    height: 100%; 
} 

.contentFieldset { 
    flex: 1; 
    -ms-flex: 1 0 auto; 
    min-width: 0; 
    display: block; 
    flex-direction: column; 
} 

.inner { 
    display: block; 
    flex-direction: row !important; 
    flex: 1; 
    -ms-flex: 1 0 auto; 
    min-width: 0; 
} 

我不知道爲什麼這個工程，但我懷疑爲-MS-FLEX的默認處理方式不同，然後彎曲的IE瀏覽器。

Answer 2

我聽說過其他問題，將「display：flex」更改爲「display：block」。工作對我來說在這個小提琴：

https://jsfiddle.net/3L2bx9w9/3/

.content { 
    display: block; 
    flex-direction: row; 
    height: 100%; 
} 

.contentFieldset { 
    flex: 1; 
    -ms-flex: 1; 
    min-width: 0; 
    display: block; 
    flex-direction: column; 
} 

.inner { 
    display: block; 
    flex-direction: row !important; 
    flex: 1; 
    -ms-flex: 1; 
    min-width: 0; 
}