React Material UI：展开的Accordion忽略父div的max-height问题

1. 修复父容器高度计算的上下文 #

.deviationContent的max-height: calc(100% - 365px)依赖上级元素的明确高度，直接给它的父元素（甚至页面根元素）设置height: 100%或者height: 100vh，确保百分比高度能正确计算。如果上级元素高度不确定，这个calc值会失效，导致Accordion撑开容器。

2. 给Accordion套内层滚动容器 #

不要让Accordion直接放在.deviationContent里，加一层专门的滚动容器，把滚动逻辑转移到内层，外层只负责固定高度：

.deviationContent {
    max-height: calc(100% - 365px);
    overflow: hidden; /* 关闭外层滚动，交给内层 */
    display: flex;
    flex-direction: column;
}
.accordion-wrapper {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}

对应HTML结构：

<div class="deviationContent">
    <div class="accordion-wrapper">
        <!-- 你的Accordion组件放在这里 -->
    </div>
</div>

这样Accordion展开后的内容会被内层容器约束，不会突破.deviationContent的高度限制。

3. 用Flexbox固定头部和底部 #

如果页面是「头部-内容区-底部」的结构，直接用Flexbox整体布局，让内容区自动占满剩余空间：

.page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.header {
    height: 120px; /* 头部固定高度 */
}
.deviationContent {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}
.footer-panel {
    height: 245px; /* 底部固定高度，两者总和对应之前的365px */
}

这种方式最可靠，头部和底部会始终固定在视口上下，内容区自动适配中间空间，Accordion的展开只会让内容区内部滚动，不会影响整体布局。

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