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

【问题标题】：Set width dynamically to 100% of content with CDK Virtual Scroll [Angular Material]使用 CDK Virtual Scroll [Angular Material] 将宽度动态设置为内容的 100%
【发布时间】：2024-01-19 16:54:01
【问题描述】：

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

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

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

How it looks with virtual scroll.

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

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

非常感谢您的帮助。

谢谢！

【问题讨论】：

虚拟滚动意味着并非所有项目都始终呈现，这意味着“自动宽度”会随着您滚动列表而不断变化。您需要预先知道确切的宽度，或者您必须接受这样一个事实：sidenav 在您滚动时会不断改变大小。
即使这样也可以，但是我怎样才能让它适应内容的宽度呢？从这里我可以继续寻找“完美”的解决方案。谢谢！

标签： css angular angular-material angular-cdk angular-cdk-virtual-scroll

【解决方案1】：

为 mat-sidenav 指定宽度

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

【讨论】：

感谢您的回答！尽管这解决了许多情况下的问题，但它仍然不适应 sidenav-content 的宽度。例如：在桌面设备上，sidenav 现在太宽了。