当溢出样式设置为＆＃34; auto＆＃34;时，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的正确填充，但我可以看到底部填充。 填充右侧和填充底部是否有一些差异？ 我怎么能让chrome正确地渲染填充？

JsFiddle Link

感谢您的帮助。

更新2014年6月11日

感谢@PradeepPansari的“内联块”解决方案，它完美无缺。 感谢@Gaurav解释滚动条如何偏向。

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

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
}