bug(VirtualScroll): Horizontal scrolling inside cdk-virtual-scroll-viewport

[Spinnenzunge]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Content inside the cdk-virtual-scroll-viewport does use more than 100% width and does not break anymore and instead adds horizontal scrolling.

This is especially a problem when using following css rules:

white-space: nowrap;
overflow: hidden;

The problem is the created wrapper container with the cdk-virtual-scroll-content-wrapper class that has a min-width: 100% set but no max-width and can not be changed because of the view encapsulation.

Reproduction

https://github.com/DaniLopes2003/VirtualScroll-DemoApp

Expected Behavior

No horizontal scroll bar added or width, max-width and min-width customizable with css variables?

Actual Behavior

Horizontal bar added because no min-width is set

Environment

• Angular: 13.0.3
• CDK/Material: 13.1.3
• Browser(s): Chrome, Safari
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[wagnermaciel]

@mmalerba Could you take a look

[saladfingerss]

I'm also having this problem so am keen on a fix too, thanks all

[rdlabo]

In my environment, this css fixed this issue:

cdk-virtual-scroll-viewport {
  height: 100%;
  width: 100%;

  .cdk-virtual-scroll-content-wrapper {
    max-width: 100% !important;
  }
}

[saladfingerss]

This worked for me, thanks @rdlabo

[andersonjohnf]

Can confirm this fix works, and that this is still an issue in Angular CDK 15. While the fix is simple finding the issue is not. If this is intended functionality it could at the very least be mentioned in the docs, along with this option if a fixed 100% width is desired.

[mchlroy]

Workaround does not work as is for me because of the encapsulation (as mentioned in the issue description). I would have to use ng-deep.

cdk-virtual-scroll-viewport {
    height: 100%;
    width: 100%;

    ::ng-deep .cdk-virtual-scroll-content-wrapper {
        max-width: 100% !important;
    }
}

Which I'd prefer not to since it is not recommended.

[pozsegam]

Any update on this?

[artemisclyde]

Also asking for an update, still an issue in Angular CDK 16.

[saladfingerss]

Workaround does not work as is for me because of the encapsulation (as mentioned in the issue description). I would have to use ng-deep.

cdk-virtual-scroll-viewport {
    height: 100%;
    width: 100%;

    ::ng-deep .cdk-virtual-scroll-content-wrapper {
        max-width: 100% !important;
    }
}

Which I'd prefer not to since it is not recommended.

I put the code suggested by @rdlabo into my main style file: src/styles.scss which means you don't need the ng::deep stuff that is needed if you put it in a component style file.

Can't comment on an actual fix in the main package though.