overflow:auto 滚动条不生效问题

4,128 阅读1分钟

问题场景

接上一篇 关于layout 布局 内容高度不填充问题 - 掘金 (juejin.cn)完成Layout布局之后,内部的滚动条不生效了,问题原因是Flex布局的问题。

解决办法

在调试过程中发现,给组件设定固定高度就会解决问题。所以根本原因为Flex布局中的Content组件高度虽然是100%,但是它的高度并不是固定的,会被子元素撑开,而滚动条生效的基本因素就是 子元素高度或者宽度大于父元素。因此需要给父元素固定高度。如下给父元素设置height:0解决觉问题了。

image.png 在父元素中设置overflow: hidden 就可以给子元素设置 height:100%; overflow-y: auto;使子元素出现滚动条了。