flex布局页面自适应滚动条问题

# flex布局页面自适应滚动条问题处理

https://zhuanlan.zhihu.com/p/141325714

https://blog.csdn.net/m0_37058714/article/details/80765562

https://www.cnblogs.com/cblx/p/8976309.html

最近遇到的样式问题，遂记录下来。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="wrap">
  <div class="header">header</div>
  <div class="main">
    <div class="left">
      left
    </div>
    <div class="center">
      <p>123</p>
      <div class="center-list">
        <ul>
          <li>1243</li>
          <li>1243</li>
          <li>1223</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
          <li>123</li>
        </ul>
      </div>
    </div>
    <div class="right">
      right
    </div>
  </div>
  <div class="footer">footer</div>
</div>
</div>
</body>
</html>

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

```scss html,body{ height: 100%; margin: 0; }

.wrap{ display: flex; flex-direction: column; height: 100%; }

.header{ height: 50px; padding: 15px; }

.footer{ height: 50px; }

.main{ flex-grow: 1; display: flex; align-items: flex-start; }

.left{ width: 200px; height: 100%; overflow: auto; background: yellowgreen; }

.center{ display: flex; flex-flow: column; align-items: center; justify-content: flex-start; width: 220px; background: aquamarine; height: 100%; overflow: auto;

&-list {
  width: 100%;
  flex-grow: 1;
  overflow: auto;
}

ul {
  height: 0;
}

li {
  list-style: none;
  line-height: 32px;
  border: 1px solid #eee;
  margin-bottom: 5px;
}

}

.right{ flex: 1; height: 100%; background: greenyellow; }

</diy-code-block>
</diy-code-group>

// Make sure to add code blocks to your code group

← 记一次有意思的性能优化前后端分离开发请求接口跨域如何携带cookie的问题→