bug(VirtualScroll): Horizontal scrolling inside cdk-virtual-scroll-viewport
- 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
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