flex:1容器内表单容器滚动失效问题排查

问题根源 #

flex布局中，仅设置flex:1的容器若未添加溢出限制，子元素高度会突破容器边界，导致整页滚动，而非触发子元素自身的overflow-y: scroll。你的结构里，表单的父容器虽设置了flex:1，但未约束高度溢出，因此表单滚动未生效。

具体修复步骤 #

• 给header下方的内容容器添加溢出限制
  该容器是页面内容的外层，设置后可限制内部元素高度不超出100vh - header高度，避免整页滚动：

  .content-container {
    flex: 1;
    overflow: hidden; /* 核心：约束内部元素溢出范围 */
  }
  

• 给包含表单和按钮的子内容容器设置垂直flex布局+溢出限制
  确保容器为垂直方向的flex布局，让表单的flex:1能占满剩余空间，同时限制溢出触发表单滚动：

  .sub-content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden; /* 关键：让表单的overflow属性生效 */
  }
  

• 保留表单原有样式
  确保表单占满剩余空间并开启垂直滚动：

  .forms {
    overflow-y: scroll;
    flex: 1 !important;
  }
  

逻辑说明 #

最外层容器通过height:100vh + flex垂直布局固定页面总高度，header占固定高度，内容容器占剩余高度；通过给内容容器、子内容容器添加overflow:hidden，逐层约束元素高度范围，最终让表单的overflow-y:scroll在自身高度超出时触发局部滚动，而非影响整页。

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