css - 大于页面宽度时将父 div 扩展为子大小

Question

父 div 必须完全包含子 div 的内容。由于奇怪的情况，该子 div 可能比页面 View 本身更宽。问题是，父 div 似乎总是受限于页面宽度，无论它包含什么。

http://jsfiddle.net/e5Lkq/1/

包含:

<div class="outer clearfix">
    <div class="inner">Oversized content here.</div>
</div>

.inner{
    background-color:red;
    height:50px;
    width:1800px;
}

.outer{
    border:5px solid blue;
    /* overflow:hidden; */
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

在这个例子中，我需要外部 div(带有蓝色边框)来围绕 child 的内容展开。

我以前遇到过这个问题 - 关于“body”样式的古怪呈现 - 但这次我无法再次找到类似的问题。将父元素的溢出设置为隐藏只是切断子元素。我总是可以在加载后放入一个 js 来调整大小，但我宁愿避免这种情况。有什么想法吗？

谢谢，杰里米

PS 我看到这个类似的元素，但答案是 jquery。这可能只是它的方式: https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website

Answer 1

您想要的类似于收缩包装。 http://jsfiddle.net/e5Lkq/2/

.outer { display: table }

要获得旧的 IE 支持，您可以在 block 容器内使用 inline-block(在默认内联元素上)。参见 this和 this (如果你真的关心支持)。但我强烈建议您放弃支持(如果可以)。额外的 8% 值得吗？另请注意，百分比因站点而异。