设置80vh高度的flex盒子内部元素过长，min-height/height配置不生效问题

问题根因 #

你为.box-const-height设置了固定值height: 80vh，该属性会强制元素高度固定为视口高度的80%，不会跟随内部内容的实际高度自适应，这是高度超出预期的核心原因。

修复方案 #

根据你的实际需求二选一即可：

1. 完全匹配内部元素实际高度：直接删除height: 80vh属性即可，flex容器默认会跟随内容高度自动适配

.box-const-height {
    display: flex;
    overflow: auto;
}

2. 需要保留最小高度限制，内容不足时保持80vh高度、内容超出时自动撑开：把height替换为min-height

.box-const-height {
    display: flex;
    min-height: 80vh;
    overflow: auto;
}

其他排查点 #

如果修改后仍有高度异常，可以逐一排查以下情况：

• 父级的.box、.row类是否设置了额外的高度、最小高度属性，继承导致高度异常
• 内部.form-group是否有未预期的margin、padding值，或者子元素存在浮动未清除的情况
• 如果你使用的是Bootstrap框架，row类默认带有负左右margin，确认外层是否缺少对应container/container-fluid类导致布局错位撑高元素

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