前端随笔（二）——overflow：scroll详解

熟悉CSS的小伙伴们都知道，当我们页面中书写的内容超出父元素宽高范围或者出现高度坍塌需要清除浮动时，overflow【溢出处理】就派上用场了。但它有一个取值scroll在笔者实际使用过程中遇到了问题。

问题：一段写在div中用p元素包裹起来的的文本，原本设置了overflow：scroll通过滑块滑动来显示内容，但随着父元素（div）宽高变化到一定值时，滑块神奇的消失了，这是为什么呢？

原因：overflow的触发是有一定条件的，只有当子元素的宽高大于父元素宽高导致溢出时才会触发overflow，这时它的几个取值（包括scroll）才能正常发挥作用。

解决方法：给父元素（div）设置宽高小于子元素即可触发overflow。水平方向可以这样操作，垂直方向只需要给父元素设置定高即可。（如下）

    <style>
        div{
            width: 120px;
            height: 200px;
            border: 2px solid black;
            overflow: scroll;
        }
        p{
            width: 150px;
        }
    </style>