flex上下固定中間滾動佈局
傳統 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出現滾動條拖動顯示溢出的內容，而移動web開發中，由於瀏覽器廠商的系統不同、版本不同，導致有部分機型不支持對彈性滾動，從而在開發中製造了所謂的 BUG。
上圖如果在PC端中，我們可以利用 position:fixed 和 overflow:auto 進行簡單的佈局實現我們需要的效果，而在手機端遇到的問題如下：
ios4 和 android2.2 以下不支持 position:fixed
ios 和 android2.3 以下不支持 overflow:auto
ios4 和 android 不支持 overflow-scrolling
最嚴重的結果是：滾動區域內容無法拖動
對於 ios4 和 android2.2 以下不支持 position:fixed 的問題，有2種佈局方法可以替代。
佈局一： 定義頁面整體高度爲100%，然後使用 position:absolute 佈局可解決
複製代碼
/*
佈局二： 定義頁面整體高度爲100%，然後使用 display:flex 佈局可解決
複製代碼
複製代碼
/*
那麼剩下的主要問題是子容器高度超出父容器高度，子容器內容如何彈性滾動。
對於如何使用彈性滾動，這裏並沒有最好的方案，具體看產品的用戶羣、產品的定位等，簡單介紹下：
方案一： overflow:auto和-webkit-overflow-scrolling: touch
適合場景：產品的用戶羣大多爲 ios5+、android4+ 用戶，建議採用 overflow-scrolling 做差異化體驗，畢竟 iscroll4.js 在 android 機器下體驗不順暢，另外還加載了 10K 多的 js 代碼。
overflow:auto 寫法在 winphone8 和 android4+ 上有用。ios5+ 版本增加了一個新的屬性：overflow-scrolling 這個屬性可以激活平滑滾動，效果不錯。
.css{
overflow:auto;/* winphone8和android4+ /
-webkit-overflow-scrolling: touch; / ios5+ */
}
實現 bottom-wrap 區域滾動
.box-wrap {
display: flex;
flex-direction: column;
height: 100vh; — 可視區域
}
.top-wrap {
flex: 0 0 wrap;
}
.bottom-wrap {
flex: 1;
overflow-
}