I'm working on creating a flexbox layout with fixed height headers and footers, while keeping the content area flexible to either scroll or expand based on its content.
You can find my code snippet on this jsfiddle link http://jsfiddle.net/evilbuck/EtQXf/3/
Everything seems to be working fine in Firefox and Chrome, but I'm having trouble with IE10. It doesn't seem to respect the overflow property and content overflows into the section below it.
The idea is for the .content area to take up the remaining space within its parent container and scroll when necessary.
<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;
}
Can anyone point out what might be causing the issue in IE10?