嵌套最小高度不起作用

Question

我有一个固定大小的绝对定位区域，其中滚动条包含可变大小的内容。

现在我需要将内容包装在两个 div 中，这两个 div 至少与区域一样大，但会扩展以适合内容。

<div id="area">
    <div id="outer">
        <div id="inner">
            <div id="content">content</div>
        </div>
    </div>
</div>

要求：

1. 它们需要扩展，因此它们的高度必须设置为自动。
2. 为了填充容器，其最小尺寸必须为 100%

因此我尝试了以下CSS（JsFiddle中的完整示例）：

#area {
    /* defined outside */
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: scroll;
}

#outer, #inner {
    min-width: 100%;
    min-height: 100%;
}

它确实有效，#outer但对 没有影响#inner。我该如何解决它？

更新 如果有帮助的话我只对 Chrome 感兴趣。

另外，我可以接受，如果指出一些带有解释的权威来源，这可能是不可能的。

更新2

所以我分析了CSS规范并得出结论，我的要求无法满足：

1. 为了使 min-height 工作，它必须绝对定位，或者它包含的块高度不能依赖于内容高度CSS2(10.7)

2. 我需要自动调整大小，所以既不能#inner也#outer不能绝对定位。这意味着包含块必须具有指定的高度。

3. 因此#outer不能包含 的块#inner。这给我留下了#area.

4. 根据CSS2(10.1)，#inner只有当元素绝对定位时才可能，这与我的目标相冲突。

Answer 1

#inner使用百分比高度意味着它基于其父级的高度#outer，该高度未指定为精确%的或px：

#area {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 20px;
    box-sizing: border-box;
}

#outer,#inner {
    min-width: 100%;
    min-height: 100%;
}

#outer {
    height:100%;
    overflow: auto;
}

这里提供了jsFiddle，它用颜色显示，#inner获得了完整的高度#outer。

我也采取了一些自由行动。我将你的#areaCSS设置为更合适的全高/宽度设置，并且我制作了你的滚动组件#outer而不是#area，因为#inner内容将溢出它。