CDK Virtual Scrolling with Flexible Width

1 week ago 10
ARTICLE AD BOX

I want to use a cdk-virtual-scroll-viewport with a list of many items. This list will be used in various places, and some items will have more text than others. So I want to set a min-width and max-width, so that when items have small amounts of text it takes up one width, and when items have more text it will fill out the width up to the max set.

But nothing I try is working. I tried tons of styling to try to get what I want, but nothing has worked so far. I feel like this should be really simple? Can anyone provide any insight?

Check out this simple example I setup in StackBlitz: https://stackblitz.com/edit/jrvmcqag?file=src%2Fapp%2Fcdk-virtual-scroll-append-only-example.html

(Also, I'm currently on angular 15, but planning to update. That's why the stackblitz in on Angular 15.)

Read Entire Article