我正在尝试在最新的Chrome,Firefox和IE11中实现这种布局:

我可以使用以下内容:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body { height: 100%; padding: 0; margin: 0; }
p { line-height: 2em; }
header, footer, article { padding: 10px; }
#parent {
height: 100%;
display: flex;
flex-flow: column nowrap;
background-color: limegreen;
}
#parent > header {
flex: none;
background-color: limegreen;
}
#parent > footer {
flex: none;
}
#child {
display: flex;
flex-direction: column;
background-color: red;
height: 100%;
min-height: 0;
}
#child > header …Run Code Online (Sandbox Code Playgroud)