Angular应用中如何用Flexbox实现中间区块独立溢出滚动

Flexbox布局下嵌套多层滚动失效的根本原因，是Flex item默认带有min-height: auto约束——当子内容高度超出容器时，Flex item会自动撑高到和内容等高，导致滚动行为被最外层的Flex容器承接，无法下传到目标滚动区块。无需修改现有HTML结构，仅需逐层补全Flex规范配置即可实现预期效果。

• 外层容器基础配置
  将最外层的#outer-container设置为纵向Flex布局，锁死视口高度：

  #outer-container {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }
  

• 路由父容器修正配置
  调整#router-outlet-parent的属性，移除会触发全区域滚动的设置：

  #router-outlet-parent {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
  }
  

  之前尝试给该容器设置overflow: auto，是导致整个Page1（含灰色页头）被整体滚动的核心原因：滚动权限应该严格限制在目标内容块上，外层父容器需始终锁死滚动行为，将高度空间传递到内部路由组件。
• 路由组件根节点配置
  在page1.component.css中给组件根节点补全Flex约束，让组件撑满父容器分配的高度：

  :host {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  

• 目标滚动区配置
  对粉色的#main-scrolling-content块设置独立滚动属性：

  #main-scrolling-content {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
  }
  

  同组件内的灰色页头为固定高度块，在纵向Flex布局中自然保持位置固定，不会跟随滚动。

• 为底部的<app-buttons>组件设置flex-shrink: 0，避免被Flex布局压缩，始终保持固定在视口底部。
• 所有纵向Flex链路中的非固定高度子项，都必须设置min-height: 0，否则默认的最小内容高度约束会撑破容器，导致overflow属性失效。

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