angular / angular/components

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

Open
#24,277 11 comments 22 reactions 0 assignees View on GitHub
area: cdk/scrolling P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### 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

Contributor guide

Open the contributing guide

Research direction

Start with the cdk-virtual-scroll-viewport and its cdk-virtual-scroll-content-wrapper element, then reproduce the behavior using the linked VirtualScroll-DemoApp and the reported white-space and overflow styles. The work is done when the viewport no longer adds unwanted horizontal scrolling and the intended width constraints remain usable; add or update coverage if the relevant test location is found.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.