----------------------------------------------------------------------
原因是： 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
