CSS相对定位的div宽度如何被绝对定位的div自动扩展

Question

是否可能通过其绝对定位的子元素，使父元素（position: relative）自动扩展其宽度？这是我的jsfiddle链接：http://jsfiddle.net/YD2Xu/

理想情况下，#container和#full-width应与#large-width具有相同的宽度。

CSS：

#container {
    position: relative;
    border: 1px solid green;
}
#large-width, #full-width {
    display: table;
    position: absolute;
}
#large-width {
    white-space: no-wrap;
    width: 1500px;
    height: 200px;
    border: 1px solid red;
}
#full-width {
    top: 30px;
    width: 100%;
    border: 1px solid blue;
}

HTML:

<div id="container">
    <div id="large-width">
        this is large width
    </div>
    <div id="full-width">
        this is full width
    </div>
</div>

我需要通过CSS实现这个功能，不要使用JavaScript。有人知道怎么做吗？非常感谢。

- spidermanit

Answer 1

如果子元素的位置是绝对定位，那么你无法根据子元素的大小来扩展父元素的div，因为绝对定位的元素会被从流中移除，所以其他元素包括父元素都会忽略它们的大小和存在。你可以使用CSS设置固定大小或使用JavaScript。

- potashin

Answer 2

尝试

overflow:auto;

对于父级元素；

- Abel D

---

这限制了容器的可见区域，但并没有真正实现问题所要求的。在您的答案中提供更多细节以解释您的推理，这样即使这种特定技术不能帮助回答问题，其他人也将从讨论中受益。 - Palpatim