----------------------------------------------------------------------
原因是： height:100% 引起的， 这句话的意思是，子元素的高度为父元素高度的100%，也就是和父元素（容器）的高度相等。
这样当父元素中有两个块级子元素时，假设父元素高度300px, 如果第一个子元素的高度是100，第二个子元素的高度是100%（即300px），则两个子元素的高度加起来就是100+300=400px,超出了父元素的高度。就会出现上面的现象了，就会出现滚动条了！！！！（所以，任何现象背后总是有原因存在的，我们要做的就是耐心的寻找到原因，然后就可以解决了）
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<style>
*{height: 100%;}
.box{height: 100px; width: 100px;}
.flex{display: flex; flex-direction: column;}
.left{flex:1;}
</style>
</head>
<body>
<div class="flex" style="width: 300px; height: 300px; border: 1px solid black; ">
<div class="right box" style="height: 100px; background-color:yellow;">menu</div>
<div class="left box" style="height: 100%; background-color:green;">content</div>
</div>
</body>
</html>
参考：
css3 垂直方向元素占据所有剩余空间 http://www.jianshu.com/p/5e0765410467
