css overflow和flex布局搭配使用，页面块可以滑动

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7         <style>
 8             
 9             .a{
10                 height: 100px;
11                 width: 250px;
12                 background-color: #bfa;
13                 border: 2px #00AA00 solid;
14                 display: flex;
15                 /* 出现滚动条 */
16                 overflow: auto;
17                 
18                 
19             }
20             
21             .a div{
22                 height: 100px;
23                 width: 100px;
24                 margin-right:70px;
25                 /* 弹性项不伸缩 */
26                 flex: none;
27                 border-radius: 10px;
28                 
29                 
30             }
31             
32             .a .b{
33                 background-color: red;
34             }
35             
36             .a .c{
37                 background-color: #0000FF;
38                 
39             }
40             .a .d{
41                 background-color: cadetblue;
42                 opacity: .3;
43             }
44         </style>
45     </head>
46     <body>
47         <div class="a">
48             
49             <div class="b"></div>
50             <div class="c"></div>
51             <div class="d"></div>
52         </div>
53     </body>
54 </html>

效果

内容

1. 父元素a使用overflow: auto; 使其出现水平滚动条，可以滑动子元素，

2.注意；flex: none; 元素伸缩性是是对弹性子项使用的

相关阅读:
失格
救赎
篝火晚会
旅行家的预算
荒诞
mod
clique
序列
[CF932E]Team Work & [BZOJ5093]图的价值
NOIWC2018游记

原文地址：https://www.cnblogs.com/fsg6/p/12719041.html