在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll:

 

在Flex box布局中,有时我们内容的宽度和高度是可变的,无法确定下来,这时候设置滚动条,可能会失效。只要记住几个关键要素,就可以解决这个问题。

1、清楚的知道当前元素的flex flow

如果要设置水平滚动条,那么父元素的flex-flow要设置为row,如果要设置纵向滚动条,那么父元素的flex-flow要设置为column。

2、flex设置为1

3、滚动方向的大小(宽度或者高度)设置为0,非滚动方向大小设置为100%或者一个你喜欢的宽度

 

这样设置,基本就可以愉快的滚动了。

有时嵌套层数太多,可能也会失效,这时候记住另外一个关键点:

4、设置父元素的大小

如果父元素大小不清晰,也会出现滚动条失效的问题,所以需要把父元素的大小设置明白。如果父元素也是可变大小的,那么要保证嵌套的flex-flow全部一直,然后宽度或者高度设置为0,这样就可以正常滚动。像我的这个例子:

 

5、如何横向和纵向全都跟随flex滚动,这个比较麻烦,一个方向用上述方法,另外一个方向用calc函数来计算吧。

我的github上有个例子:https://github.com/vularsoft/studio-ui

里面的html-demo.html文件是一个完全由flex box实现的布局,感兴趣的可以参考。

弹性盒子Flex Box滚动条原理,避免被撑开,永不失效的更多相关文章

  1. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  2. CSS3 弹性盒子(Flex Box) 微信小程序图片通栏

    {{define "chkUrl"}} <!DOCTYPE html><html lang="zh-cmn-Hans"><head ...

  3. CSS3总结五:弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  4. 认识弹性盒子flex

    认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...

  5. css3系列之弹性盒子 flex

    弹性盒子(伸缩盒) 注意,本篇会很长,非常长, 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性  ctrl + F   如果觉得图太小, ctrl + +键 设置弹性盒子的属性: display:f ...

  6. css3弹性盒子 flex布局

    CSS3 弹性盒 1.display:flex 说明: 设置为弹性盒(父元素添加) 2.flex-direction(主轴排列方式) 说明: 顺序指定了弹性子元素在父容器中的位置 row 默认在一行内 ...

  7. CSS 弹性盒子 flex的三个属性:grow、shrink、basis

    flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...

  8. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  9. css3弹性盒子

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

随机推荐

  1. Opencv笔记(一):图像的基本操作

    1.图像的读.显示和保存操作 import cv2 img = cv2.imread('filename',0); cv2.imshow('name',img); k=cv2.waitKey(0); ...

  2. 用命令修改Oracle数据库密码

    1.改密码    (1).打开doc命令框键入:sqlplus /nolog     (2).输入:connect / as sysdba     (3).修改密码:alter user userNa ...

  3. 9.数据分组 group by

    --数据分组 group by --作用:用于 对查询的数据进行分组,并处理 select deptno,job from emp group by deptno,job --1.分组之后,不能将除分 ...

  4. Linux基础篇三:文件系统

    /bin      实际上是  /usr/bin /sbin    实际上是  /usr/sbin /usr/bin 里面的命令其实是依赖  /lib64  或者    /lib32 ldd  /us ...

  5. 吴裕雄--天生自然python学习笔记:python安装配置tesseract-ocr-setup-3.05.00dev.exe

    下载地址:https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-3.05.00dev.exe 点击安装,记得复制安装的路径,待会 ...

  6. openfire配置好文

    http://www.th7.cn/db/mysql/201406/59838.shtml 下载地址:Openfire 3.8.2 Release

  7. Metric space,open set

    目录 引入:绝对值 度量空间 Example: 开集,闭集 引入:绝对值 distance\(:|a-b|\) properties\(:(1)|x| \geq 0\),for all \(x \in ...

  8. tomcat端口占用异常

    错误记录--更改tomcat端口号方法,Several ports (8005, 8080, 8009) 2011年01月18日 01:34:00 阅读数:202700 启动Tomcat服务器报错: ...

  9. 客户端和后台交互日期注意点 sqlite日期字段使用Date类型的情况下

    不要直接传递时间类型 一般把时间格式化字符串后传递 不要传递Date().getTime() 毫秒数  非要使用的话需要在后台处理 传递的毫秒数 - TimeZone.getDefault().get ...

  10. linux下常用命令查看端口占用

    在Linux使用过程中,需要了解当前系统开放了哪些端口,并且要查看开放这些端口的具体进程和用户,可以通过netstat命令进行简单查询netstat命令各个参数说明如下: -t : 指明显示TCP端口 ...