当子元素水平溢出时，为什么忽略父元素的右边距？

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，这是唯一一个不会忽略正确填充的浏览器。）

Answer 1

您遇到this问题。

我会通过给孩子一个保证金（而不是父母的填充）来解决它：

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>

Answer 2

Dunno但是补充道：

#child{
  display: inline-block;
}

似乎要修复它：http://jsfiddle.net/523me/6/

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

Answer 3

不，填充不会被忽略，但它仍然在父级内。

请参阅updated jsFiddle，您可以在其中看到填充没有从原始位置移开。

编辑：嗯，有一些异常现象。如果你给内部div一个右边距，那也会被忽略。嗯。提出你的问题。

Answer 4

您可以将填充更改为边框。

padding: 20px;

到

border: 20px solid gray;

Answer 5

将padding-right应用于溢出元素本身，并将背景移动到其直接子元素。

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

<style>
#parent {padding-right: 0; }
#child {padding-right: 20px; }
#child > DIV {background: yellow; }
</style>

http://jsfiddle.net/523me/9/