Flex容器设置overflow:scroll后子元素滚动异常问题求助

HTML #

<section class="variable-layout">
    <div class="variables">
        <table id="adminPasser" name="True">
            <tr>
                <th>Variable Name</th>
                <th>Value</th>
                <th>Unit</th>
                <th>Lock</th>
            </tr>
            <!-- 动态插入的表格行 -->
        </table>
    </div>
    <div class="var-actions">
        <span onclick="openPopup(0)">Add Variable</span>       
        <span id="apply" name="1">Apply Locks</span>                
    </div>
</section>

原CSS #

.spreadsheet-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.variable-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 20%;
    border-right: 2px solid #213B54;
    overflow: scroll;
}
.variables {
    border-top: 2px solid #213B54;
    width: 100%;
    height: auto;
}
.var-actions {
    display: flex;
    flex-direction: row;
    margin: 0px auto;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #067A9F;
    padding-top: 1vw;
}
.var-actions span {
    padding-left: 1vw;
    padding-right: 1vw;
    cursor: pointer;
}  

核心原因 #

Flex容器的子元素默认min-height: auto，意味着子元素高度不会被压缩到自身内容高度以下。当表格内容过多时，.variables会被内容无限撑开，超出父容器.variable-layout的高度，但Flex布局会优先保证子元素完整显示，导致父容器的overflow: scroll无法触发，反而表格内容溢出浏览器视口（或父级隐含的溢出范围）出现滚动。

方案1：底部按钮固定，表格区域单独滚动（推荐） #

此方案满足“底部span始终可见”的核心需求，让表格在专属区域滚动，操作按钮固定在侧边栏底部。

修改后的CSS：

.spreadsheet-layout {
    display: flex;
    flex-direction: row;
    height: 100vh; /* 明确设置高度为视口高度，确保子容器能继承有效高度 */
}
.variable-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 20%;
    border-right: 2px solid #213B54;
    /* 移除overflow: scroll，让表格区域单独处理溢出 */
}
.variables {
    border-top: 2px solid #213B54;
    width: 100%;
    flex: 1; /* 占据侧边栏除了按钮区域之外的所有可用空间 */
    overflow-y: auto; /* 表格内容溢出时，此区域显示垂直滚动条 */
}
.var-actions {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #067A9F;
    padding: 1vw 0; /* 调整内边距，上下对称更美观 */
    background-color: #fff; /* 可选，防止滚动时表格内容穿透按钮区域 */
}
.var-actions span {
    padding: 0 1vw;
    cursor: pointer;
}

方案2：整个侧边栏整体滚动 #

如果确实需要整个侧边栏（包括按钮）一起滚动，需限制父容器的最大高度，确保内容溢出时触发滚动：

修改后的CSS：

.spreadsheet-layout {
    display: flex;
    flex-direction: row;
    height: 100vh; /* 明确视口高度 */
}
.variable-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 20%;
    border-right: 2px solid #213B54;
    overflow-y: scroll; /* 触发垂直滚动 */
    max-height: 100vh; /* 限制最大高度为视口，防止内容无限撑开 */
}
.variables {
    border-top: 2px solid #213B54;
    width: 100%;
    height: fit-content; /* 让内容自然撑开高度 */
}
/* .var-actions 样式保持不变 */

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