移動端flex實現頭部固定，主體部分可上下滑動

近期移動端要實現頭部固定，主體部分單獨實現上下滑動，開始用了fixed/absolute佈局，各類bug，做爲新手實在搞不定，找到以下解決方案，目前完美無bug。
注意header部分，若是你想固定高度，就要加上flex-shrink: 0，我認爲最好加上，可保持同類頁面間header高度統一。

html添加類名

<div class="view">
    <div class="header"></div>
    <div class="main"></div>
</div>

css部分

<style>
// 頁面實現header固定，main單獨實現滑動
.view {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
.header {
    // view（也就是整個頁面）使用flex佈局，若是內容超出頁面高度，子元素的flex-shrink默認爲1，header設置的高度會縮小，設置爲0後不會縮小
    flex-shrink: 0;
}
.main {
   overflow-y: scroll;
}