代码：
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
border: 1px solid black;
Box-sizing: border-Box;
margin: 0;
padding: 0;
}
.red-border {
border: 2px solid red;
}
.blue-border {
border: 2px solid blue;
}
.green-border {
border: 2px solid green;
}
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
<div style="flex: 0 1 auto; ">top</content></div>
<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
<div style="flex: 0 1 auto; ">left</div>
<div style="flex: 1 1 auto; width: 100%; height: 100%;">
<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
</div>
<div style="flex: 0 1 auto; ">right</div>
</div>
<div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>
plnkr：http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/
更新：’center’div应该是一个非flex的div,仍然必须有100％的高度.原因是非flex的div是我真正的网站结构非常复杂 – 它使用了很多web组件,其中一些只是不能使用flex.所以在某些时候我不得不停止使用flex并使用’normal’div来获得100％的高度.
解决方法
更改：
(1)
< div class =“green-border”
style =“flex：1 1 auto; display：flex; flex-direction：row; width：100％; height：100％;” >
至
< div class =“green-border”
style =“flex：1 1 100％; display：flex; flex-direction：row; width：100％;” >
备注：删除高度;使用flex-basis代替;
(2)
< div style =“flex：1 1 auto; width：100％; height：100％;”>
至
< div style =“flex：1 1 100％;宽度：100％;显示：flex;”>
备注：删除高度;使用flex-basis代替;建立嵌套的flex容器;
(3)
< div style =“background-color：#ff6500; width：100％; height：100％;”> center< / div>
至
< div style =“background-color：#ff6500; width：100％; flex：1 1 100％;”> center< / div>
备注：删除高度;使用flex-basis代替;增加了flex属性;
(4)
clsas =“蓝色边框”
至
类=“蓝色边框”
通过上面的调整,Chrome中的布局呈现如下：
所有盒子都放在容器内.
将100％高度应用于嵌套的非柔性元素
在大多数情况下,在子元素上使用百分比高度时,还必须为父元素和所有祖先元素指定百分比高度,直到并包括根元素.
html,body { height: 100%; }
我在这里解释了这个原因：
> Working with the CSS height property and percentage values
但仔细观察spec会发现一个例外：
The percentage is calculated with respect to the height of the
generated Box’s containing block. If the height of the containing
block is not specified explicitly (i.e.,it depends on content
height),and this element is not absolutely positioned,the value
computes to ‘auto’.
注意部分：…并且元素没有绝对定位.
因此,请在“中心”框中尝试：
更改：
(5)
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
至
<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
<div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
center</div>
</div>
笔记：
>添加位置：相对于建立最近定位的祖先进行绝对定位
>创建了新的嵌套的非flex div容器
>将绝对定位应用于高度为100％的新div.
使用绝对定位,您无需将百分比高度应用于父容器.
