css - 使用 CDK Virtual Scroll [Angular Material] 将宽度动态设置为内容的 100%

Question

我尝试实现一个包含 Angular 材质扩展面板列表的 Sidenav。当我使用 ngFor 指令时，布局看起来很好，就像我想要的那样。正如您在图像中看到的，它将视图扩展为扩展面板内容宽度的 100%。 使用 ngFor-directive 布局。
Stackblitz 使用 ng-For-directive 的外观： https ://stackblitz.com/edit/angular-ivy-fwav88?file=src/app/app.component.ts

由于列表中可能会有数千个项目，我想使用 CDK 虚拟滚动来提高性能。

但是使用它，我无法将列表的宽度设置为 100%。相反，有一个水平滚动条。

虚拟滚动的外观。

带有虚拟滚动的代码堆栈闪电战：https ://stackblitz.com/edit/angular-ivy-xr5bok?​​file=src/app/sidenav/sidenav.component.html

我尝试使用 flexbox 和我知道的所有其他 CSS 技巧，但没有任何成功。

我将非常感谢您的帮助。

谢谢！

Answer 1

给 mat-sidenav 宽度

<mat-sidenav position="end" mode="side" [opened]="sidenavOpen" 
style="width:50%;">