scroll-padding-inline with container query?

[bakura10]

Hello,

I run into a behavior that surprised me a bit, but it consistent across browsers. I wonder if this is the expected result or if it is a spec bug. I'm trying to create a full bleed feature and use cqw units to do automatic calculation. Unfortunately, while the margin and padding are calculated correctly, the scroll-padding-inline does not seem to work. This issue can be reproduced here: https://codepen.io/bakura10/pen/wBMoaqK

As you can see in the inspector the correct value is calculated for both padding-inline and margin-inline, but for some reason it does not apply to the scroll-padding-inline.

What is the reason of this behavior?

Thanks.

[johannesodland]

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;

[bakura10]

Extremely clear, thanks a lot!