Skip to content

[css-align-3][css-overflow-3] Content alignment on scroll containers extends scrollable area #4957 #10139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 10, 2025
Merged

[css-align-3][css-overflow-3] Content alignment on scroll containers extends scrollable area #4957 #10139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions css-align-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -897,7 +897,7 @@ Content Distribution for Scroll Containers</h5>
<h5 id=auto-safety-position>
Self-Alignment for Absolutely Positioned Boxes</h5>

For [=absolutely positioned=] [=alignment subjects=]
For [=absolutely positioned=] [=alignment subjects=]
whose relevant [=self-alignment property=] is not ''justify-self/normal'',
the default [=overflow alignment=] behavior is as follows:

Expand Down Expand Up @@ -1171,30 +1171,24 @@ Content-Distribution Shorthand: the 'place-content' property</h3>
in which case it is defaulted to ''start''.

<h3 id="overflow-scroll-position">
Overflow and Scroll Positions</h3>
Alignment Overflow and Scroll Containers</h3>

When the <a>content-distribution properties</a> are set
on a <a>scroll container</a> with an overflowing <a>alignment subject</a>,
rather than shifting the layout positions of its content,
they instead change its <a>initial scroll position</a>
so that the initially-visible content
of the <a>scroll container</a>
satisfies the [[#alignment-values|expected alignment]]
of the <a>alignment subject</a> and <a>alignment container</a>.
However, the [[css-scroll-snap-2#scroll-initial-target-with-place-content|scroll-initial-target]]
property, when present, overrides the <a>content-distribution properties</a>
in determining the <a>initial scroll position</a>.

Note: The presence of scrollbars can change the size of the [=scroll container’s=] content box,
and thus the size of the [=alignment container=]
and/or [=alignment subject=].
they reduce the clipping of the [=negative scrollable overflow region=]
just enough to ensure that <a>alignment subject</a> can be scrolled
into its ''align-content/start''-aligned position.

<div class='example'>
For example,
if a scrollable flex container is set to ''justify-content: flex-end''
(or ''justify-content: flex-start'' with ''flex-flow: row-reverse''),
it will be initially displayed scrolled all the way to the main-end edge of its content,
its [=in-flow=] content will be initially positioned
to align the main-end edge of its content to the main-end edge of the flex container,
and its content will appear to overflow its main-start edge.
However, the viewer will be able to scroll <em>up</em>
to view the overflowing [=in-flow=] content,
just as if ''justify-content: flex-start'' had been specified.
</div>

<figure>
Expand All @@ -1204,17 +1198,16 @@ Overflow and Scroll Positions</h3>
</figcaption>
</figure>

None of this changes how scroll coordinates are assigned:
the origin is still where it would be in a ''align-content/start''-aligned container,
it just might be initially positioned outside the <a>scrollport</a>.

Note: The <a>alignment subject</a> is not necessarily
identical to the <a>scrollable overflow area</a>:
content overflowing the <a>alignment subject</a>,
such as an absolutely-positioned or out-of-flow element,
grows the <a>scrollable overflow area</a> but not the <a>alignment subject</a>,
thus an ''align-content/end''-aligned <a>scroll container</a>
might not be initially scrolled all the way to the bottom.
content overflowing the <a>alignment subject</a>--
such as an [=out-of-flow=] box--
grows the <a>scrollable overflow area</a> but not the <a>alignment subject</a>.
Thus an ''align-content/end''-aligned <a>scroll container</a>
might not be initially scrolled all the way to the bottom,
and positioned content can still be clipped
if it is further into the [=negative scrollable overflow region=]
than the [=in-flow=] content forming the [=alignment subject=].

<figure>
<img src="images/scroll-align-overflow.jpg" alt="">
Expand All @@ -1226,6 +1219,10 @@ Overflow and Scroll Positions</h3>
</figcaption>
</figure>

Note: The presence of scrollbars can change
the size of the [=scroll container’s=] [=content box=]--
and thus the size of the [=alignment container=]
and/or [=alignment subject=].

<h3 id="baseline-align-content">
Baseline Content-Alignment</h3>
Expand Down Expand Up @@ -2523,6 +2520,9 @@ Changes</h2>
<a href="https://github.com/w3c/csswg-drafts/issues/9960">Issue 9960</a>)
<li>Make all the ''space-*'' keywords fallback to ''safe'' overflow.
(<a href="https://github.com/w3c/csswg-drafts/issues/10154">Issue 10154</a>)
<li>Clearly define the interaction of overflowing [=content distribution=] and [=scroll containers=]
to not impact layout, but to only affect the extent of the [=scrollable overflow area=].
(<a href="https://github.com/w3c/csswg-drafts/issues/4957">Issue 4957</a>)
<li>Only apply the special margin-edge baseline rule for [=scroll container=] [=block containers=]
when 'baseline-source' is its [=initial value=].
(<a href="https://github.com/w3c/csswg-drafts/issues/8214">Issue 8214</a>)
Expand Down
38 changes: 22 additions & 16 deletions css-overflow-3/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ Scrollable Overflow</h3>
The border boxes
of all boxes for which it is the containing block
and whose border boxes are positioned not wholly
in the [=negative scrollable overflow region=],
in the [=unreachable scrollable overflow region=],
accounting for transforms by projecting each box onto
the plane of the element that establishes its <a>3D rendering context</a>.
[[!CSS3-TRANSFORMS]]
Expand Down Expand Up @@ -265,15 +265,16 @@ Scrollable Overflow</h3>

<li>
Additional padding added
to the [=end=]-side of the [=scrollable overflow rectangle=]
as necessary to enable a scroll position
that satisfies the requirements of ''place-content: end'' alignment.
to the [=scrollable overflow rectangle=]
as necessary to enable scroll positions
that satisfy the requirements of both
''place-content: start'' and ''place-content: end'' alignment.

Note: This padding represents,
within the [=scrollable overflow rectangle=],
the box’s own padding
so that when its content is scrolled to the end,
there is padding between the end-edge of its in-flow (or floated) content
so that when its content is scrolled to its end,
there is padding between the edge of its in-flow (or floated) content
and the border edge of the box.
It typically ends up being exactly the same size as the box's own padding,
except in a few cases--
Expand All @@ -293,9 +294,13 @@ Scrollable Overflow</h3>

Additionally, due to Web-compatibility constraints
(caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
UAs must clip any content in the [=negative scrollable overflow region=]
(thereby behaving as if they had no <a>scrollable overflow</a>
on the wrong side of the [=scroll origin=]).
UAs must clip any content in the [=unreachable scrollable overflow region=].

Note: The [=content-distribution properties=] can
[[css-align-3#overflow-scroll-position|alter the unreachable scrollable overflow region]]
to ensure that a [=scroll container=]’s [=alignment subject=]
is reachable after alignment.
[[CSS-ALIGN-3]]

<!--
Considerations:
Expand Down Expand Up @@ -341,9 +346,9 @@ Scrolling Overflow</h3>
is typically dependent on the [=scroll container=]’s [=writing mode=],
and, unless otherwise specified,
coincides with its [=scroll origin position=].
However, the 'align-content' and 'justify-content' properties [[!CSS-ALIGN-3]] as well as the
'scroll-initial-target' property [[!CSS-SCROLL-SNAP-2]] can be used to change the [=initial scroll position=],
see [[css-align-3#overflow-scroll-position]].
For example, 'scroll-initial-target' property
can be used to change the [=initial scroll position=].
[[!CSS-SCROLL-SNAP-2]]

A <dfn export>scroll position</dfn> is a particular alignment
of the [=scrollable overflow rectangle=]
Expand All @@ -356,8 +361,10 @@ Scrolling Overflow</h3>
Unless otherwise specified,
it is the [=block-start=] [=inline-start=] corner of the [=scrollable overflow rectangle=].
(For example, in a [=flex container=] it is the [=main-start=] [=cross-start=] corner.)
The area beyond the [=scroll origin=] in either axis
is considered the <dfn export>negative scrollable overflow region</dfn>:
Unless otherwise adjusted
(e.g. [[css-align-3#overflow-scroll-position|by content alignment]] [[css-align-3]]),
the area beyond the [=scroll origin=] in either axis
is considered the <dfn export>unreachable scrollable overflow region</dfn>:
content rendered here is not accessible to the reader,
see [[#scrollable]].
A [=scroll container=] is said to be scrolled to its [=scroll origin=]
Expand All @@ -368,8 +375,7 @@ Scrolling Overflow</h3>

<div class="example">
For example,
the 'align-content' and 'justify-content' properties [[CSS-ALIGN-3]]
and [=scroll snapping=] [[CSS-SCROLL-SNAP-1]]
[=scroll snapping=] [[CSS-SCROLL-SNAP-1]]
can change the [=initial scroll position=]
away from the [=scroll origin position=].
</div>
Expand Down