如何为可滚动元素实现内容高度与固定值取最小值的效果？

原本要实现的效果是让容器高度取内容高度和100px中的较小值，理想的CSS写法是：

height: min(min-content, 100px);

但这个写法目前还没被广泛支持。如果放弃height属性改用max-height/min-height，又会丢失内部内容的滚动功能。现在需要在保留三层div嵌套结构的前提下，实现需求并保留滚动能力。

修改后的可行代码 #

<div style="position: absolute;
    border: 1px black solid;
    box-sizing: border-box;
    width:10rem;
    max-height: 100px;
    min-height: min-content;">
    <div style="position: relative;
        width: 100%;
        height: 0;
        min-height: 100%;">
        <div style="height: 100%; width: 100%; overflow-y: auto;">
            <div>A</div>
            <div>B</div>
            <div>C</div>
            <div>D</div>
            <div>E</div>
            <div>F</div>
            <div>G</div>
        </div>
    </div>
</div>

关键调整说明 #

• 最外层容器：删掉固定的height:100px，只保留max-height:100px和min-height:min-content，让容器高度随内容自适应，但最高不超过100px。
• 中间层容器：把height:100%改成height:0; min-height:100%，这样它能精准继承外层容器的实际高度（不管是内容撑起来的高度还是100px上限），确保内部滚动容器能正确获取高度触发滚动。
• 最内层滚动容器：保持height:100%和overflow-y:auto，当内容高度超过外层的100px上限时，自动出现垂直滚动条。

内容的提问来源于stack exchange，提问作者greenoldman