关于padding在overflow:hidden下的计算

Question

问题: 为什么父容器的右边距(padding-right)没有了?

现象:

拖拽到最右端: 

样式:

        .box {

            box-sizing: content-box;

            width: 200px;

            height: 200px;

            background: #fc0;

            padding: 15px 15px 15px 15px;

            border: 1px solid #000;

            overflow-x: scroll;

            overflow-y: hidden;

            .content {

                overflow: hidden;

                width: 400px;

                height: 400px;

                background: #69c;

                padding: 15px;

                border: 1px solid #6D23B8;

            }

        }

Answer 1

不是没了是被子元素覆盖了,更改代码如下可以验证 .box {            box-sizing: content-box;            width: 200px;            height: 200px;            background: #fc0;            padding: 15px 15px 15px 15px;            border: 1px solid #000;            overflow-x: scroll;            overflow-y: hidden;           background-clip: content-box;            .content {                overflow: hidden;                width: 400px;                height: 400px;                /* background: #69c; */                padding: 15px;                border: 1px solid #6D23B8;            }        }补充：溢出滚动的意思，对于超出padding的内容提供滚动机制，关键点在溢出是对溢出内容的处理，padding不会被挤过去，还在原来的位置。