Re: [csswg-drafts] scroll-padding-inline with container query? (#12900)

Hi @bakura10 

Percentages refer to different things depending on which properties they are used in. 
- `margin` and `padding` percentages refer to the logical width of the containing block. 
- `scroll-padding` percentages refer to the corresponding size of the scroll containers scroll port. 

In your case `calc((100cqw - 100%) / 2)` evaluate to 20px for both `margin-inline` and `padding-inline`. 
For `scroll-padding-inline` however, it evaluates to `0px`. This is because the negative margins has made the scroll-port the same size as the body. 

Lets say you viewport is 1000px wide, and you have no scrollbars, so the body-element is 1000px wide as well. 

The values in `scroll-padding-inline` then evaluate to.
- 100cqw: 1000px;
- 100%: 1000px;
- calc((100cqw - 100%) / 2): 0px;

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12900#issuecomment-3364366548 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 3 October 2025 05:55:46 UTC