html - 子元素水平溢出时，为什么忽略了父元素的右填充？

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 内边距，而子级会水平溢出(因为它更宽)。如果将父项一直滚动到右侧，您会看到子项接触到父项的右边缘。

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

有没有办法在这种情况下强制应用正确的填充，不必从流中移除任何元素(通过 float 或定位)？

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

屏幕截图 2 - 应用右侧填充。这就是我想要完成的。 (顺便说一句，屏幕截图来自 IE7，这是唯一不会忽略正确填充的浏览器。)

Answer 1

您患有 this问题。

我会通过给 child 一个边距(而不是给 parent 一个填充)来解决这个问题:

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>