PrimeNG垂直TabView如何实现可纵向滚动的单列布局？

问题核心成因 #

你遇到的两个异常（无法触发纵向滚动、设置高度后导航自动折成多列），本质是弹性布局的默认规则和PrimeNG原生样式没有被完全覆盖：

• 你给导航容器设置flex-direction: column时，没有关闭原生样式里的flex-wrap: wrap规则：当容器被限制高度后，弹性布局会把放不下的导航项自动排到第二列，形成多列排布
• 所有flex弹性子项默认带min-height: auto属性，会阻止子项在父容器高度限制下触发内容溢出，导致你设置了overflow: auto也无法弹出滚动条
• 你之前用flex-grow: 1给导航容器分配空间时，没有固定导航的宽度，导致交叉轴的尺寸计算混乱，导航项的排布不受控

可直接复用的修正CSS #

1. 修正外层横向布局容器的尺寸规则 #

:host ::ng-deep .orientation-right {
  flex: 1;
  display: flex;
  flex-direction: row;
  /* 用明确的高度值替代max-height，给内部滚动提供稳定的尺寸计算基准 */
  height: 800px;
  /* 关闭子项自动撑大的默认规则，让内部溢出逻辑生效 */
  min-height: 0;
}

2. 修正导航容器的滚动、排布规则 #

:host ::ng-deep .p-tabview-nav {
  /* 给导航栏设固定宽度，不要用flex-grow在垂直方向占空间 */
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  /* *核心规则*：关闭弹性布局的自动换行，从根源避免导航项变多列 */
  flex-wrap: nowrap;
  /* 只保留垂直方向的滚动，隐藏水平滚动 */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* 清理p-tabview-nav作为ul元素的默认样式 */
  list-style: none;
  padding: 0;
  margin: 0;
}

3. 修正单个导航项的尺寸约束 #

:host ::ng-deep .p-tabview-nav .p-tabview-nav-item {
  /* 让每个导航项水平占满导航栏宽度，不要随弹性布局自动伸缩 */
  flex: 0 0 auto;
  width: 100%;
}

调整后的实际效果 #

• 所有导航项严格保持单列纵向排布，不管容器高度是多少都不会自动折行成多列
• 当导航项总高度超过容器的可视高度时，导航区域会自动触发垂直滚动条，不会把整个页面撑长
• 导航栏宽度保持固定，右侧的Tab内容区会自动占满剩余的横向空间，不会出现布局挤压

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