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

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

你正在遭遇这个问题.

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

body {
  padding: 2em;
}

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

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

演示:jsFiddle

Answer 2

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

padding: 20px;

到

border: 20px solid gray;

Answer 3

Dunno，但添加：

#child{
  display: inline-block;
}

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

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

Answer 4

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

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

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