使用flex解决overflow需要设置固定高度的问题


背景

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

实现

假设我们要实现以下页面，页面结构可以看右边的dom，分为top标题栏，bottom_left菜单栏，bottom_right_top子页面标题，bottom_right_bottom子页面四个部分。
在这里插入图片描述
先看bottom_left菜单这部分，要在不设置高度的情况下实现超出部分可滚动，设置哥块样式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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一起就表示永远会占满剩下的区域，不会超出也不会被压缩。

1
2
3
4
5
6
7
.bottom {<!-- -->
  flex: 1;
  flex-shrink: 0;
  height: 0;
  width: 100%;
  display: flex;
}
方式二

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

1
2
3
4
5
6
.bottom {<!-- -->
  flex: 1;
  overflow: scroll;
  width: 100%;
  display: flex;
}

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

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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>

最终效果

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