Html 嵌套的最小高度不起作用

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

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

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

它对

#外部

有效，但对

#内部

无效。我怎样才能修好它

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

此外，我可以接受，如果指向某个权威来源并加以解释，这可能是不可能的

更新2

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

要使最小高度起作用，它必须绝对定位，或者它包含的块高度不得取决于 论内容高度

我需要自动调整大小，这样既不能绝对定位

#内部

也不能绝对定位

#外部

。这意味着 包含块必须具有指定的高度

因此，

#外部

不能包含

#内部

的块。这就给我留下了

#区域

根据这一点，只有当元素被绝对定位时，

#internal

才有可能 与我的目标相冲突

---

如果更改<代码>最小高度：100%至<代码>高度：100%它将工作。

内部

使用百分比高度意味着它是基于其父级

#外部

的高度，而不是指定为精确的

%

或

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;
}

，用颜色显示，

#内部

获得

#外部

的全高

---

我也有一些自由。我将

#area

CSS设置为更合适的全高/全宽设置，并将滚动组件

#outer

改为

#area

，因为

#内部
将是溢出的内容。
您的最小高度应基于
px
而不是
%
至少这就是我解决问题的方法。只需使用合理的
像素高度

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

这样，内部将始终与外部一样大。
我不确定我是否正确理解了这个问题，内部或内容应该扩展什么

假设您希望内部展开以填充外部。
如前所述，你还需要一个100%的高度和一个绝对的内部位置

然后根据内部或内容上的滚动内容

#outer {
background: red;
position: static;
min-width: 100%;
min-height: 100%;
}
#inner {
background: blue;
position: absolute;
min-width: 100%;
min-height: 100%;
height:100%;
overflow:auto;
}
#content {
height: 200px;
background-color:yellow;
overflow:auto;
}

这将锁定不符合要求2的
#外部
的高度。我需要它展开并在
#区域
上滚动。虽然这并不能解决我的问题，但您是对的，
#外部
需要精确的高度才能使
#内部
的相对大小正常工作（请参见上面的更新2）。如果缩小窗口并导致内容溢出（要求2），则不会展开以适合内容.如果#内容溢出（见上文），则不会。
#outer {
background: red;
position: static;
min-width: 100%;
min-height: 100%;
}
#inner {
background: blue;
position: absolute;
min-width: 100%;
min-height: 100%;
height:100%;
overflow:auto;
}
#content {
height: 200px;
background-color:yellow;
overflow:auto;
}