柔性盒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不尊重溢出

回答

相关问题