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

Question

嗨 - 是否有可能让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/