柔性盒IE10不尊重溢出

我試圖創建一個具有設置高度的頁眉和頁腳的柔性盒，並具有靈活的內容區域，可以滾動或不滾動，具體取決於內容的數量。柔性盒IE10不尊重溢出

您可以在這裏看到http://jsfiddle.net/evilbuck/EtQXf/3/

這在FF，鉻，但不是我的IE10小提琴。 IE10似乎不尊重溢出屬性並滲入下面的內容。

我的期望是.content區域將擴大以填充其父項的剩餘空間並在必要時滾動。

<div class="container"> 
    <header>A header</header> 
    <div class="content">Some content that will overflow or not.</div> 
    <footer>A footer</footer> 
</div> 

.container { 
    margin: 10px auto; 
    width: 300px; 
    height: 350px; 

    display: flex; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 

    flex-direction: column; 
    -webkit-flex-direction: column; 
    -moz-flex-direction: column; 
    -ms-flex-direction: column; 
} 

header, footer { 
    border: 1px solid grey; 
    height: 30px; 
    padding: 5px; 
    text-align: center; 
    clear: both; 
} 



.content { 
    flex: 1; 
    -webkit-flex: 1; 
    -moz-flex: 1; 
    -ms-flex: 1; 
    overflow: auto; 
}

我在做什麼錯在這裏？

來源

2013-10-04 Evil Buck

在這裏我要離開這個給別人，但短期的那就是我需要使用

display: -ms-flexbox;

更新小提琴：http://jsfiddle.net/EtQXf/4/

來源

2013-10-04 23:54:26

柔性盒IE10不尊重溢出

回答

相關問題