Virtual scrolling Angular - adjust to width of content

Question

I have a table with N items using virtual scrolling. Is there a way of having the scrollbar just next to the edge of my table. At the moment the scrollbar is on the edge of the screen.

I am aware I can have a fixed width for the scroll container, but that's not good enough.

Stackblitz link: https://stackblitz.com/edit/angular-dxkuiu

Answer 1

Have you tried to alter the .virtual-scroll class? Instead of having a fixed width in px you could adjust by percentage of screen.

.virtual-scroll{
    height: 300px;
    width: 20%;
}