当子元素水平溢出时，为什么忽略父元素的正确填充？

Question

鉴于这种简单的结构：

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

使用此CSS：

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

现场演示：http://jsfiddle.net/523me/5/

请注意，父级有一个20px填充，并且子级水平溢出（因为它更宽）。如果您将父级一直向右滚动，您会看到子级触及父级的右边缘。

因此，父级应该有一个正确的填充，但它被忽略了。似乎当孩子有一个固定的宽度时，父级的正确填充不适用。（这是标准规定的吗？我很想知道。如果你发现什么，请告诉我！）

是否有一种方法可以强制在此场景中应用正确的填充，而不必从流中移除任何元素（通过浮动或定位）？

屏幕截图1-忽略右侧填充。这就是当前所有浏览器的行为方式。

屏幕截图2-应用右侧填充。这就是我正在努力实现的目标。（顺便说一句，屏幕截图来自IE7，IE7是唯一一款不忽略右侧填充的浏览器。）

Answer 1

您可以将填充改为边框。

padding: 20px;

到

border: 20px solid gray;

Answer 2

不知道，但添加：

#child{
  display: inline-block;
}

似乎可以解决这个问题：http://jsfiddle.net/523me/6/

我只测试了最新的Chrome浏览器，可能不是跨浏览器的

Answer 3

你正遭受这个问题的折磨。

我会通过给孩子留一个边距（而不是给父母一个填充物）来解决这个问题：

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}

<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>