我们经常使用flex:1来动态分配父容器剩余空间，这时候如果要在容器上增加滚动条，使用overflow: auto可能会失效。

原因：

一般原因：因为容器所在的父容器采用了默认样式overflow: visible，即允许内容溢出到父容器外，那么就会对使用flex: 1的容器没有给到一个固定的高度，所以我们针对这种情况，只需要在父容器添加overflow: auto来让父容器创建BFC，让内容不会溢出。

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <style>
  10.     body {
  11.       margin: 0;
  12.     }
  13.     .container {
  14.       display: flex;
  15.       flex-direction: column;
  16.       height: 100vh;
  17.       overflow: hidden;
  18.     }
  20.     .parent1 {
  21.       height: 80px;
  22.       background: red;
  23.     }
  25.     .parent2 {
  26.       flex: 1;
  27.       display: flex;
  28.       flex-direction: column;
  29.       /* 父容器创建BFC，一般使用overflow:auto */
  30.       overflow: auto;
  31.     }
  33.     .child1 {
  34.       height: 80px;
  35.       background: green;
  36.     }
  38.     .child2 {
  39.       flex: 1;
  40.       overflow: auto;
  41.       background: greenyellow;
  42.     }
  44.     .child2-sub {
  45.       height: 1000px;
  46.       width: 100px;
  47.       background: orange;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="container">
  52.       <div class="parent1"></div>
  53.       <div class="parent2">
  54.         <div class="child1"></div>
  55.         <div class="child2">
  56.           <div class="child2-sub"></div>
  57.         </div>
  58.       </div>
  59.     </div>
  60.   </body>
  61. </html>