纯CSS实现无固定高度但带max-height的模态框子元素高度适配

方法一：Flex布局实现 #

这是兼容性较好且直观的方案，通过Flex布局让父元素建立明确的高度上下文：

#modal {
    height: auto;
    width: auto;
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 5px;
    display: flex; /* 启用Flex布局 */
}

#modal-content {
    width: 700px;
    height: 700px;
    max-height: 100%; /* 现在可正确继承父元素的max-height */
    border: 1px solid blue;
    padding: 5px;
    overflow: auto; /* 可选：内容超出时显示滚动条 */
}

方法二：Grid布局实现 #

原理与Flex类似，通过Grid布局让父元素高度计算脱离子元素影响：

#modal {
    height: auto;
    width: auto;
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 5px;
    display: grid; /* 启用Grid布局 */
}

#modal-content {
    width: 700px;
    height: 700px;
    max-height: 100%;
    border: 1px solid blue;
    padding: 5px;
    overflow: auto;
}

方法三：利用高度计算规则强制上下文 #

通过height:0和min-height:auto打破循环依赖，让父元素既可以被内容撑开，又能提供百分比高度参考：

#modal {
    height: 0; /* 强制父元素高度不依赖子元素 */
    min-height: auto; /* 允许内容正常撑开高度 */
    max-height: calc(100vh - 50px);
    max-width: calc(100vw - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 5px;
}

#modal-content {
    width: 700px;
    height: 700px;
    max-height: 100%;
    border: 1px solid blue;
    padding: 5px;
    overflow: auto;
}

问题原因解释 #

CSS中，子元素的百分比高度（如max-height:100%）需要父元素有明确的计算后高度值。你原代码中#modal设置了height:auto，此时父元素高度完全由子元素内容撑开，形成循环依赖，导致子元素的max-height:100%无法正确计算生效。上述方案都通过不同方式打破了这个循环，让父元素提供可参考的高度上下文。

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