Angular Material CDK虚拟滚动如何动态将宽度设为内容的100%

问题原因 #

CDK虚拟滚动内部会自动生成绝对定位的内容包裹层，默认不继承父级100%宽度规则，同时虚拟视口默认开启水平滚动，当内部元素宽度计算超出视口时就会触发横向滚动条，你之前给外层加flex样式无法作用到CDK自动生成的内部容器，所以没有效果。

修复步骤 #

1. 给虚拟滚动视口设置宽度规则，禁用水平滚动

cdk-virtual-scroll-viewport {
  width: 100%;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

如果你的侧边栏是固定宽度，也可以直接把width设为固定值比如300px，适配性更好。

2. 强制覆盖CDK内部容器和展开面板的宽度

/* 适配虚拟滚动内部自动生成的包裹容器 */
.cdk-virtual-scroll-content-wrapper {
  width: 100% !important;
}
/* 确保展开面板占满可用宽度 */
mat-expansion-panel {
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 !important; /* 可选，移除默认边距避免溢出 */
}

3. 可选：适配折叠面板动态高度
   如果你的面板支持展开/折叠，高度不固定，可以给虚拟视口开启自动高度适配：

<cdk-virtual-scroll-viewport itemSize="48" [autosize]="true">
  <mat-expansion-panel *cdkVirtualFor="let item of list">
    <!-- 面板内容 -->
  </mat-expansion-panel>
</cdk-virtual-scroll-viewport>

其中itemSize填折叠状态下单个面板的高度即可。

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