Skip to content
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

Jump to bottom

[css-sizing-4] Define stretch sizing properly, rather than (incorrectly) indirecting thru stretch alignment. #9902

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[css-sizing-4] Define stretch sizing properly, rather than (incorrectly) indirecting thru stretch alignment. #9902

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 16 additions & 29 deletions css-sizing-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -826,37 +826,24 @@ Extrinsic Size Determination</h2>
<h3 id="stretch-fit-sizing">
Stretch-fit Sizing: filling the containing block</h3>

Stretch-fit sizing tries to set the box’s used size
to the length necessary
to make its outer size as close to filling the [=containing block=] as possible
while still respecting the constraints imposed by min-height/min-width/max-height/max-width.

Formally, its behavior is the same as specifying an [=automatic size=]
together with a [=self-alignment property=] value of ''width/stretch''
(in the relevant axis),
except that the resulting box,
which can end up not exactly fitting its [=alignment container=],
can be subsequently aligned by its actual [=self-alignment property=] value.

Additionally,
in [=formatting contexts=] and axes in which the relevant [=self-alignment property=] does not apply
(such as the block axis in Block Layout, or the main axis in Flex Layout),
in cases where a percentage size in that axis would resolve to a definite value,
a [=stretch-fit size=]
causes the box to attempt to fill its containing block--
behaving as ''100%''
but applying the resulting size to its margin box
instead of the box indicated by 'box-sizing'.
[=Stretch-fit sizing=] indicates the size necessary to make the box’s [=outer size=]
fill the [=containing block=].
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if the box is a block-level that establishes an independent formatting context, and there are floats to avoid?
justify-self aligns within the float-shrunken containing block.

For [=absolutely positioned boxes=],
it fills the [=inset-modified containing block=].
Similar to <<percentage>> sizes,
when the [=containing block=] size in the relevant axis is not [=definite=],
the [=stretch-fit size=] resolves to the [=automatic size=].

For this purpose, ''margin/auto'' margins are treated as zero,
and furthermore, for [=block-level boxes=] in particular,
if its block-start/block-end [=margin=]
would be adjoining to its parent's block-start/block-end [=margin=]
and furthermore, for a [=block-level box=] in particular,
if its [=block-start=] ([=block-end=]) [=margin=]
would be <l spec=css22>[=adjoining=]</l>
to its parent's [=block-start=] ([=block-end=]) [=margin=]
if its parent’s [=sizing properties=] all had their [=initial values=],
then its block-start/block-end [=margin=] is treated as zero.

Note: Consequently, if neither ''align-self/stretch'' alignment applies
nor percentage sizing can resolve,
then the box will resolve to its [=automatic size=].
then its [=block-start=] ([=block-end=]) [=margin=] is treated as zero.
(I.e. the margins are treated as if they collapsed away,
so that a child whose margins collapse with its parent
will correctly and completely fill its parent.)

<div class="example">
For example, given the following HTML representing two [=block boxes=]:
Expand Down