Question

我正在尝试创建一个带有设置高度的页眉和页脚的弹性框，并且具有灵活的内容区域，可以根据内容的数量滚动，也可以不滚动。

你可以在这里看到我的小提琴http://jsfiddle.net/evilbuck/EtQXf/3/

这适用于FF，Chrome，但不适用于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;
}

我在这里做错了什么？

Answer 1

我会把这个留给其他人，但缺点是我需要使用

display: -ms-flexbox;

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

flex-box IE10不尊重溢出

1 个答案: