背景

通常在页面上的某一部分，需要超出滚动的情况，我们会设置固定高度或者宽度，但这样设置固定高度或者宽度很不灵活，当页面需要隐藏某一部分，就需要重新计算固定的高度或者宽度，很繁琐且容易出错。
这里可以使用flex弹性布局来解决overflow需要设置固定高度的问题。

实现

假设我们要实现以下页面，页面结构可以看右边的dom，分为top标题栏，bottom_left菜单栏，bottom_right_top子页面标题，bottom_right_bottom子页面四个部分。

先看bottom_left菜单这部分，要在不设置高度的情况下实现超出部分可滚动，设置各块样式如下

.app {
   
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
.top{
   
  height: 50px;
  padding: 10px 50px;
  width: 100%;
  background: #faa3ef;
}
.bottom {
   
  flex: 1;
  width: 100%;
  display: flex;
}
.bottom_left {
   
  height: 100%;
  width: 100px;
  overflow: scroll;
}
.menu {
   
  height: 100px;
  background: linear-gradient(#fafafc, blue);
}

这样会发现顶部标题栏固定顶部失效，会跟着滚动，而且标题栏高度被压缩（50px变成40.6px）

这时候在bottom_left上增减样式已经无效了，需要在他的父级bottom这块上调整样式，有两种方式。

方式一

在bottom_left的父级bottom上设置flex-shrink为0，height为0。flex-shrink为0表示不会被压缩，配合上height为0，flex为1一起就表示永远会占满剩下的区域，不会超出也不会被压缩。

.bottom {
   
  flex: 1;
  flex-shrink: 0;
  height: 0;
  width: 100%;
  display: flex;
}
方式二

在bottom_left的父级bottom上设置overflow: scroll。

.bottom {
   
  flex: 1;
  overflow: scroll;
  width: 100%;
  display: flex;
}

右边可上下左右拖动的部分和左边类似，也可以使用两种方式实现

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no">
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style> * {
     margin: 0; box-sizing: border-box; } .app {
     height: 100vh; width: 100vw; display: flex; flex-direction: column; } .top{
     height: 50px; padding: 10px 50px; width: 100%; background: #faa3ef; } .bottom {
     flex: 1; /* 方式一 设置flex-shrink为0，设置height为0 */ /* 方式二 设置overflow: scroll */ flex-shrink: 0; height: 0; /*overflow: scroll;*/ width: 100%; display: flex; } .bottom_left {
     height: 100%; width: 100px; overflow: scroll; } .menu {
     height: 100px; background: linear-gradient(#fafafc, blue); } .bottom_right {
     flex: 1; /* 方式一 设置flex-shrink为0，设置width为0 */ /* 方式二 设置overflow: scroll */ flex-shrink: 0; width: 0; /*overflow: scroll;*/ display: flex; flex-direction: column; } .bottom_right_top {
     height: 50px; padding: 10px 50px; } .bottom_right_bottom {
     flex: 1; overflow: scroll; } .page {
     width: 2000px; height: 2000px; padding: 10px; overflow: scroll; border: 5px dashed red; } </style>
<body>
<div class="app">
  <div class="top">标题</div>
  <div class="bottom">
    <div class="bottom_left">
      <div class="menu">菜单1</div>
      <div class="menu">菜单2</div>
      <div class="menu">菜单3</div>
      <div class="menu">菜单4</div>
      <div class="menu">菜单5</div>
      <div class="menu">菜单6</div>
    </div>
    <div class="bottom_right">
      <div class="bottom_right_top">子页面标题</div>
      <div class="bottom_right_bottom">
        <div class="page">可左右上下拖动的子页面</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

最终效果

最终效果如下图，这其中的要点就是要针对可滚动区域的父级设置样式，以上两种方式都行。