[css-values][css-contain] Can we account for scrollbars on containers when sizing 100cq*?

[mirisuzanne]

In #6026 we resolved to have viewport units account for scrollbars, when overflow:scroll or scrollbar-gutters:stable is set on the root (propagating directly to viewport, not from body).

This will also work for cq* units that are relative to the root (no container defined), since they default to the equivalent sv* units. However, authors are likely to have the same issue on non-root containers.

Demo: https://codepen.io/miriamsuzanne/pen/poBjQxm?editors=1100

Would it make sense to apply our above resolution to cq* units anywhere that the container in question has either overflow:scroll or scrollbar-gutters:stable set?

[bramus]

Would make sense. +1 from me.

[lilles]

Only for container units, and not for evaluating size container queries?

For media queries vs viewport units that's difficult because the style that affects scrollbar presence can depend on media queries, but for container queries that should work if you want to?

[mirisuzanne]

Oh, I think that would be great to handle both.

[css-meeting-bot]

The CSS Working Group just discussed [css-values][css-contain] Can we account for scrollbars on containers when sizing 100cq*? , and agreed to the following:

• RESOLVED: both container query units and container queries should take into account relevant scrollbar gutters when theyre present

The full IRC log of that discussion

<jarhar> miriam: a while back we resolved on viewport units account for scrollbars when overflow is set to scroll or when scrollable gugtters are stable. when we know the scrollbars are there we account for them in the viewport size. this issue is just saying lets take that logic and apply it to container queries as well
<fantasai> +1
<jarhar> miriam: lets apply that logic to container query units, so when we know there are scrollbars lets ? them into container query units. rune said ? container as well, thats what we would like to do if that seems possible
<futhark> q+
<bramus> +1
<astearns> ack fantasai
<astearns> ack futhark
<jarhar> futhark: i would like ian to confirm if that doesn't cause any layout problems but i think if we do it in container units it shoulnd't be any more different to do for ? stuff
<jarhar> iank_: i tnhink we want to keep ? the same internal mechanism and keep that consistent, well ideally
<jarhar> iank_: does that ? rune?
<jarhar> futhark: for implementation complexity its simpler to have the same size for ? and queries
<bramus> s/does that ? rune?/is that correct, Rune?
<jarhar> iank_: i think thats fine as long as were not considering auto. just to confirm this is ? just scrollbars right?
<jarhar> miriam: this is only when scrollbar gutters are set to stable or when overflow is set to scroll, so only when we know there are scrollbars, or scrollbar space
<lwarlow> q+
<jarhar> iank_: yeah that seems fine
<astearns> ack lwarlow
<jarhar> lwarlow: just to check does this account for if you go over edges in your ?
<jarhar> miriam: not sure i understand
<astearns> s/go over/got both/
<jarhar> lwarlow: if you got scrollbar gutter ? reserve space for one scrollbar but if you ? space youve effectively got two scrollbars
<bramus> q+
<astearns> ack bramus
<jarhar> miriam: if we can account for that we should. if theyre stable thenwe know that space is taken so we should account for it
<florian> q+
<jarhar> bramus: luke, youre asking if your scrollbar covers stable ? i dont think thats what we want to do ? when theyre stable then ? layout shift, it has equal spacing to the left and right
<astearns> https://www.irccloud.com/pastebin/IIgSkI7D/
<jarhar> florian: scrollbar gutter has a value thats reserved for ? on both edges, in addition to being stable you can be stable both edges, in that case you should count it twice, otherwise once
<jarhar> bramus: if you have scorllbar gutter stable and you abspos something does it ? over something ?
<emilio> It should act like a scrollbar
<jarhar> lwarlow: i think having position fixed ? it might be a bit tough but other than that if gutters reserved
<florian> s/thats reserved for ? on/that reserves space on
<emilio> scrollbar-layer should behave like a scrollbar, so we should treat them the same
<jarhar> iank_: from the layout perspective, scrollbar ? scrollbar ? a difference then its the same thing , so abspos i think account for the scrollbar and then
<futhark> q+
<astearns> ack florian
<florian> q-
<astearns> ack futhark
<jarhar> futhark: i wanted to confirm we are separating the direction so if you have overflow scroll in one direction it will only affect the unit of the query in that direction. if you have stable in the block or if you have scrollbar in the ? still not include the scrollbar in the horizontal direction
<jarhar> iank_: that was my assumption
<jarhar> futhark: yep, just to confirm
<jarhar> astearns: i think the proposed resolution is both the container query units should take into account - should take into account relevant scrollbar gutters when theyre ?
<bramus> s/theyre ?/theyre present
<jarhar> miriam: when theyre stable? i didn't catch the final word
<jarhar> astearns: stable, yeah
<jarhar> iank_: you could also word is as include scrollbars space unless theyre auto scrollbars or something like that
<jarhar> astearns: yeah i was using present as the term ??
<jarhar> astearns: have relevant gutters present
<jarhar> miriam: makes sense to me
<khush> q+
<astearns> ack khush
<jarhar> khush: is there an issue with the flag does this change existing behavior?
<jarhar> iank_: i think we're early enough in the lifecycle of this feature that it wont be an issue ?? we can report that ?? but i suspect it wont
<jarhar> astearns: any objections?
<emilio> yeah, overflow:scroll is not used _super_ often, so we can probably get away with it
<emilio> Most likely if we get away with it for viewport units we can get away for containers :)
<astearns> RESOLVED: both container query units and container queries should take into account relevant scrollbar gutters when theyre present
<jarhar> astearns: did i get that right or do i need to amend it?
<jarhar> astearns: anything more on this issue?