css - 扩展到最大的包含 "positioned"的 block ？

Question

在容器中，您可以以任何方式将两个 block 放在彼此之上(例如绝对)并使容器扩展到最大块的大小/高度吗？

如果使用 position: absolute 容器不会扩展到定位元素的大小。

有什么方法可以用 CSS 实现这种效果吗？

---

说明性(已失效)示例:

<div class="wrap">
    <div class="foo">foo</div>
    <div class="bar">bar</div>
</div>

CSS:

.wrap{
    position: relative;
}
.foo{
    height: 40px;
}
.bar{
    height: 60px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

jsFiddle:http://jsfiddle.net/qjFR9/

我想将 .bar 放置在 .foo 之上(放置 .bar 就好像没有 .foo) 和 .wrap 应该是最大 child 的高度。

Answer 1

如果容器的宽度是固定的，这样的解决方案可行:

<div class="wrap">
    <div class="foo"><div class="inner">foo</div></div>
    <div class="bar"><div class="inner">bar</div></div>
</div>

CSS:

.wrap{
    overflow: auto;
}
.wrap,
.wrap .inner{
    width: 300px;
}
.wrap > div{
    float: left;
    width: 0;
}

/* test: .wrap expands to fit the .inner content */
.bar > .inner{
    height: 60px;
}

jsFiddle demo .

但这不适用于非固定宽度的包装器。

有没有更好的办法？