好久不写前端代码了，有些生疏了。最近用Electron写了一个客户端程序，碰到了Flex布局添加滚动条的问题，耗费了不少时间，所以总结一下要点：
- 根据滚动条的方向，确定好父元素的
flex-flow方向： 如果要设置水平滚动条，那么父元素的flex-flow要设置为row；如果要设置纵向滚动条，那么父元素的flex-flow要设置为column。 - 元素本身
flex设置为1； - 滚动方向的大小（宽度或者高度）设置为0，非滚动方向大小设置为
100%或者一个你喜欢的宽度； - 如果元素本身还有子元素，需要特别注意子元素的高度需要设置为
100%。如果没有设置，则会导致子元素本身的高度不受限制，从而撑爆了元素本身。
特别需要注意的就是第4点：布局的时候经常使用到el-row/el-col，其最后生成的html代码就会出现嵌套的div组合，是一个典型的父子结构。这时就要注意在el-col上设置相应的高度为100%，否则就会出现撑爆了的结果。
下面是最终的代码，相关要点添加了注释：
1<div class="app">
2 <el-main class="main">
3 <div class="title">邮件预览</div>
4 <el-row>
5 <el-col :span="16">
6 <div class="mail-address">收件人：{{ email }}</div>
7 </el-col>
8 <el-col :span="8" style="text-align: right; padding-right: 10px">
9 <el-button type="primary" @click="sendMail" :disabled="!sendEnabled">发送邮件</el-button>
10 </el-col>
11 </el-row>
12
13 <div class="mail-content">
14 <div class="box-card">
15 <div v-html="mailContent"></div>
16 </div>
17 </div>
18
19 <div class="title" v-if="logVisible">服务日志</div>
20 <div class="log-container" v-if="logVisible">
21 <div class="box-card" ref="logContainer">
22 <pre>{{ serverLog }}</pre>
23 </div>
24 </div>
25 </el-main>
26<div>
对应的css代码：
1.app {
2 display: flex;
3 flex-direction: column;
4 height: 100vh;
5}
6
7.main {
8 display:flex; /* flex布局 */
9 flex-direction: column; /* 垂直排列 */
10}
11
12.title {
13 font-size: 16px;
14 font-weight: 400;
15 color: #1f2f3d;
16 line-height: 1;
17 position: relative;
18 padding: 10px 0 10px 20px;
19 box-sizing: border-box;
20 display: flex;
21 align-items: center;
22 background: #ffffff;
23}
24
25.box-card {
26 margin: 0 10px 10px;
27 height: 100%; /* 子元素的高度设置为100%，防止撑爆父元素 */
28 overflow-y: scroll;
29 border: 1px solid #E0E0E0;
30 padding: 0 10px;
31 background: #f7f7f7;
32}
33
34.mail-address {
35 font-size: 14px;
36 padding: 10px 20px 10px 20px;
37 text-decoration:underline;
38}
39
40.mail-content {
41 flex: 3 0 auto; /* 邮件显示区与log区比例3：2 */
42 font-size: 16px;
43 height: 0; /* height设置成0，让flex布局处理大小 */
44 margin-bottom: 20px;
45}
46
47.log-container {
48 flex: 2 0 auto; /* 邮件显示区与log区比例3：2 */
49 height: 0; /* height设置成0，让flex布局处理大小 */
50 padding-bottom: 20px; /* 避免被footer覆盖 */
51}
52
53.log-container pre {
54 font-size: 14px;
55}