Skip to content

Commit ba7b956

Browse files
committed
[css-align-3] Reword scrolling-alignment to hopefully make it more clear. Related to #1425.
1 parent d9b1079 commit ba7b956

1 file changed

Lines changed: 18 additions & 10 deletions

File tree

css-align-3/Overview.bs

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,6 +1073,10 @@ Overflow and Scroll Positions</h3>
10731073
of the <a>scroll container</a>
10741074
satisfies the expected alignment of the <a>alignment subject</a> and <a>alignment container</a>.
10751075

1076+
Note: The presence of scrollbars can change the size of the [=scroll container’s=] content box,
1077+
and thus the size of the [=alignment container=]
1078+
and/or [=alignment subject=].
1079+
10761080
<div class='example'>
10771081
For example,
10781082
if a scrollable flex container is set to ''justify-content: flex-end''
@@ -1081,18 +1085,22 @@ Overflow and Scroll Positions</h3>
10811085
and its content will appear to overflow its main-start edge.
10821086
</div>
10831087

1084-
Performing such alignment can require that the <a>scrollable overflow region</a>
1085-
be extended by the amount of padding specified
1086-
on the end edges of the <a>scroll container</a>.
1087-
Therefore,
1088-
for consistency,
1089-
any non-''align-content/normal'' value of 'align-content' or 'justify-content'
1090-
causes the <a>scrollable overflow region</a> to be extended
1088+
Because the <a>scroll container</a>’s end-edge padding
1089+
is not always included in the <a>scrollable overflow region</a>
1090+
(see [[css-overflow-3#scrollable]]),
1091+
performing such alignment might require
1092+
that the <a>alignment subject</a> be positioned
1093+
in a way that would normally not be possible just by scrolling.
1094+
To resolve this problem
1095+
(and be consistent across alignment values),
1096+
all non-''align-content/normal'' values of 'align-content'/'justify-content'
1097+
cause the <a>scrollable overflow region</a> to be extended
10911098
in the relevant axis
1092-
however much would be required to satisfy ''align-content/end'' alignment
1093-
in that axis.
1099+
however much would be required to make it possible to scroll
1100+
to a position satisfying ''align-content/end'' alignment in that axis.
10941101
(In general, this means that the <a>scroll container</a>’s padding
1095-
is added to the bounding rectangle of its in-flow children.
1102+
is added to the bounding rectangle of its in-flow children
1103+
on <em>both</em> sides of the <a>scrollable overflow region</a>.
10961104
See [[css-overflow-3]] for details.)
10971105

10981106
ISSUE: Coordinate wording with css-overflow once it's less of a mess.

0 commit comments

Comments
 (0)