flex全屏显示结合overflow-y:auto实现内容溢出滚动

在网页布局中，特别是后台管理系统布局的时候，很多时候需要使用全屏显示。全屏中的局部内容超出滚动。

随着各大浏览器的升级，flex布局逐渐在网页布局中广为应用。使用flex布局不仅灵活而且高效。

在单页应用中，使用flex布局的时候如何实现全屏且滚动呢，有时候会出现没有效果的问题：

1. 最外层容器，全屏

   .container {
       position: fixed;
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
   }
   

2. 在容器中一部分给固定高度，另一部分给flex:1;

   .header {
       width: 100%;
       height: 80px;
   }
   
    .content {
       flex: 1;
       border: 2px solid orange;
       position: relative;  // 要在子组件中实现滚动，需设置
   }
   

3. 子组件中设置

   .page_container {
       position: absolute; // 使用定位，否则可能会滚动条失效
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: column;
       border: 3px solid yellow;
   }
   

4. 子组件中的子组件继续依次方法即可实现