高度等于动态宽度(CSS流体布局)+展开以包含溢出

Question

Hi——是否可以将高度等于流体宽度的div展开以在狭窄的视口中包含其内容？

我用一个纯色div找到了一个变通办法：http://jsfiddle.net/2nprw0xq/

但没有边界：http://jsfiddle.net/534k9e2n/

这是我正在使用的代码。谢谢，B.

<div class="holder">
<div class="shape"></div>
<div class="shape_outer">
<div class="shape_inner"> Text... </div>
</div>
</div>

.holder {
    display: inline-block;
    position: relative;
    width: 50%;
}
.shape {
    margin-top: 100%;
}
.shape_outer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 1px solid #111;
}
.shape_inner {
    padding: 20px;
}

Answer 1

将边界移动到内部元素，然后添加100%宽度和100%最小高度，如下所示：

.shape_inner {
    border: 1px solid #111;
    padding: 20px;
    min-height: 100%;
    width: 100%;
}

看看：http://jsfiddle.net/534k9e2n/1/