ext-inner块高度计算异常，使用calc设置max-height后滚动效果不生效

问题根因 #

百分比高度生效的核心前提是父元素拥有明确的、可被计算的固定高度值，当前代码存在两处不符合要求的配置：

• .extended 仅设置了max-height和height: min-content，无明确固定高度值，导致子元素.ext-inner的百分比高度找不到计算参照，calc(100% - 100px)逻辑完全失效
• .ext-inner额外设置了height: min-content，会优先适配内容高度，进一步覆盖了max-height的限制规则

修复方案 #

仅调整两处CSS配置即可实现需求：

1. 给.extended设置明确高度，替换原有的max-height和min-content配置，保证父级高度可被子元素继承计算
2. 移除.ext-inner的height: min-content属性，将overflow-y: scroll改为overflow-y: auto（无内容溢出时不显示滚动条，体验更优）

修复后完整代码如下：

<!DOCTYPE html>
<html>
 
<head>
 
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    html,
    body {
        height: 100%;
    }
 
    .wrapper {
        height: 100%;
    }
 
    .block {
        border: 1px solid black;
    }
 
    .content {
        height: 80%;
        overflow: hidden;
    }
 
    .content .base {
        height: 100px;
    }
 
    .content .extended {
        height: calc(100% - 100px);
    }
 
    .extended .ext-header {
        height: 100px;
    }
 
    .extended .ext-inner {
        overflow-y: auto;
        max-height: calc(100% - 100px);
    }
 
    p {
        padding: 30px 0;
    }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <div class="content">
            <div class="base block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia vitae praesentium, laborum atque repellat debitis accusamus temporibus saepe hic perferendis? Quaerat nesciunt, qui non perferendis sed, adipisci saepe iste aliquam? </div>
            <div class="extended block">
                <div class="ext-header">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui recusandae minus deleniti nemo laudantium aliquam sunt, eligendi, debitis, voluptatem earum tempore repudiandae perferendis dolorum magni molestias sapiente veritatis unde! Ratione.
                </div>
                <div class="ext-inner">
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                    <p>Lorem</p>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

内容的提问来源于stack exchange，提问作者i like Cola