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

It does not otherwise affect layout or scrolling mechanics.

Author: fantasai

css-align-3/Overview.bs

@@ -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:
 
@@ -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>
@@ -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="">
@@ -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>
@@ -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>)

css-overflow-3/Overview.bs

@@ -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]]
@@ -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--
@@ -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:
@@ -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=]
@@ -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=]
@@ -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>