flex布局中间行按钮增多不撑高页面 两列表单独滚动实现问题

核心问题原因 #

你遇到的问题本质是Flex布局默认规则导致的：Flex容器的子项默认min-height: auto，会优先保证内部内容完整展示，不会主动收缩；同时按钮列表的父级元素没有明确高度限制，导致overflow-y: auto无法触发，最终内容撑开整个页面挤压底部行。

修改方案 #

只需调整以下CSS规则即可实现需求：

1. 调整.flex-row-1规则，添加min-height: 0允许行收缩，避免被内容撑开：

.flex-row-1
{
    display: flex;
    flex: 1;
    min-height: 0; /* 新增规则 */
}

2. 修正.flex-row-2规则，删除多余属性，明确固定35%高度：

.flex-row-2
{
    display: flex;
    height: 35%; /* 替换原min-height，固定占页面总高度35% */
    /* 删除原有margin-bottom: auto属性 */
}

3. 新增规则限制行2内部列的高度，和行2高度保持一致：

.flex-row-1 .col-6 {
    height: 100%;
}

4. 调整.buttonList规则，明确高度继承，触发溢出滚动：

.buttonList
{
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 100%; /* 新增规则 */
}

修改后页面总高度始终保持100%，底部行不会被挤压，两个按钮列表内容溢出时可分别独立滚动，互不影响。

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