html - 当溢出样式设置为 "auto"时，Chrome 不会呈现正确的填充

Question

我有以下代码:

CSS

#div1 {
    width: 300px;
    height: 300px;
    padding: 40px;
    background-color: blue;
    overflow: auto;
}

#div2 {
    width: 400px;
    height: 400px;
    background-color: red;
}

HTML

<div id="div1">
    <div id="div2">
    </div>
</div>

我想知道的是为什么我在 chrome 中看不到 #div1 的正确填充，但我可以看到底部填充。padding-right 和 padding-bottom 有区别吗？我怎样才能让 chrome 正确渲染 padding-right？

JsFiddle Link

感谢您的帮助。

2014 年 6 月 11 日更新

感谢@PradeepPansari 提供的“inline-block”解决方案，它运行完美。并感谢@Gaurav 对滚动条工作原理的解释。

但还是让我很困惑，为什么当我将display设置为'inline-block'时，@Gaurav的解释好像出错了。而当我使用chrome查看demo时，padding-bottom会被渲染出来。再一次，谁能解释为什么“display: inline-block”有效？

Answer 1

我看到 FF 也给出了与 chrome 相同的结果。

我会试着用下面的图片来解释你的问题

- 获取div并定位的全过程

---

- 现在注意不同的滚动位置

---

The whole problem is because of the Div 2 height and width is larger than Div 1, As we know, Padding width and height is not added to the element width and height as it is done for margin. So the scroll get the scroll width and height of the Div 2, and as the div 2 height and width is greater than Div 1, padding to right and bottom is not visible.