css3 flex:1

最近在寫vue的移動端項目，在展示訂單信息的時候用到了better-scroll插件（以下簡稱BS），BS需要給父級wrapper一個高度，滾動視圖content也需要一個高度，寫固定高度肯定是不實際的，在不同系統不同設備上高度都是不同的，寫固定高度的話就會出問題，於是乎flex: 1就派上了用場
flex:1 具體就不解釋了，只需要知道要使用flex:1，必須在彈性模塊中，既display: flex
<div class="main">         <div class="test1"></div>         <div class="test2"></div>         <div class="test3"></div> </div>
.main {             display: flex;             flex-direction: column;             position: absolute;             right: 0;             left: 0;             height: 100%;
}
.test1, .test3  {             height: 5%;             background-color: red;  }
.test2 {             flex: 1;             background-color: yellow;  }
.test3{             background-color: green; }
在這個例子中，test2就會自動占滿除test1和test3以外的90%的視圖
實際操作：