flex 固定底部或者头部失效

<div class='wrap'>
     <div class='header'></div>
    <div class='main'></div>
     <div class='footer></div>
</div>

/*设置html和body的高度为显示屏的高度*/
/*如果当前滚动页面最大父级是html, body，一定要加上height: 100%，否则，flex固定是失效*/
/*如果是在弹窗里面固定底部布局，则父级弹窗一定要加上height:xx%; 光是min-height和max-height是不可以的，否则也会失效*/
  html, body {
    height: 100%;
    margin: 0;
  }
  
  .wrap{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .main{
       overflow-y:auto;
       flex: 1; 
   }

   .header,.footer{
       height: 50px;
   }