当溢出样式设置为“自动”时，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 提供的“内联块”解决方案，它运行良好。 感谢@Gaurav 解释滚动条是如何工作的。

但这仍然让我感到困惑，为什么当我将 display 设置为 'inline-block' 时，@Gaurav 的解释似乎出错了。 而当我使用 chrome 查看演示时，会渲染 padding-bottom。 再说一次，任何人都可以解释为什么“显示：内联块”有效吗？

Answer 1

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

我将尝试通过以下图片来解释您的问题

- 获取div和定位的全过程

---

- 现在注意各种滚动位置

---

整个问题是因为 Div 2 的高度和宽度大于 Div 1， 众所周知，填充宽度和高度不会像边距一样添加到元素的宽度和高度上。所以滚动得到了Div 2的滚动宽度和高度，并且由于div 2的高度和宽度大于Div 1，所以向右和底部的填充是不可见的。

Answer 2

使用此代码

#div1 
{
width: 400px;
height: 400px;
padding: 40px;
background-color: blue;
}

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

Answer 3

你可以试试下面的代码：

Working Demo

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

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