如果子内容宽于浏览器宽度，则父元素背景将被切断

Question

在一个简单的标记上：

<div class="line">
    <div class="content_width">Content</div>
</div>

使用CSS：

.line {
    background: yellow;
}
.content_width {
    width: 500px;
}

黄色背景作为浏览器窗口很宽，因此如果窗口宽度小于500并且向右滚动，则可以看到它已被切断。如何使浏览器正确呈现？ Test Fiddle

我认为.line作为父元素应该占用其子元素的最大宽度，但也许我错了。我也可以将宽度设置为.line，但我希望看到更优雅的解决方案，而无需设置额外的宽度，因为该网站是响应式的，这只是一个IE8问题。

我认为首先这是一个IE问题，但我现在看到其他浏览器也是如此。我没注意到，因为网站是响应性的。

Answer 1

尝试给出：

display: inline-block;

到.line班。

虽然我知道这是有效的，但我不能指出你为什么这样做的官方文件。也许其他人可以提出解释+更好的解决方案。