Skip to content

Commit ec2bf70

Browse files
committed
[css-sizing-4] More clarifying edits, and an added example, for the 'try your best to fill your container' text for width/height:stretch. #1614
1 parent 65c0f2f commit ec2bf70

File tree

1 file changed

+22
-3
lines changed

1 file changed

+22
-3
lines changed

css-sizing-4/Overview.bs

+22-3
Original file line numberDiff line numberDiff line change
@@ -654,9 +654,11 @@ Stretch-fit Sizing: filling the containing block</h3>
654654
Additionally,
655655
in [=formatting contexts=] and axes in which the relevant [=self-alignment property=] does not apply
656656
(such as the block axis in Block Layout, or the main axis in Flex Layout),
657-
[=stretch-fit sizing=] still has the effect
658-
of causing the box to attempt to fill its containing block,
659-
invoking the percentage size calculations but applying that size to its margin box
657+
in cases where a percentage size in that axis would resolve to a definite value,
658+
a [=stretch-fit size=]
659+
causes the box to attempt to fill its containing block--
660+
behaving as ''100%''
661+
but applying the resulting size to its margin box
660662
instead of the box indicated by 'box-sizing'.
661663
For this purpose, ''margin/auto'' margins are treated as zero,
662664
and furthermore, for [=block-level boxes=] in particular,
@@ -665,6 +667,10 @@ Stretch-fit Sizing: filling the containing block</h3>
665667
if its parent’s [=sizing properties=] all had their [=initial values=],
666668
then its block-start/block-end [=margin=] is treated as zero.
667669

670+
Note: Consequently, if neither ''align-self/stretch'' alignment applies
671+
nor percentage sizing can resolve,
672+
then the box will resolve to its [=automatic size=].
673+
668674
<div class="example">
669675
For example, given the following HTML representing two [=block boxes=]:
670676
<pre class=html>
@@ -699,6 +705,19 @@ Stretch-fit Sizing: filling the containing block</h3>
699705
</pre>
700706
</div>
701707

708+
<div class="example">
709+
On the other hand,
710+
in this example the container's height is indefinite,
711+
causing a percentage height on the child to [=behave as auto=],
712+
so ''height: stretch'' [=behaves as auto=] as well.
713+
714+
<pre>
715+
.outer { height: auto; margin: 0; }
716+
.inner { height: stretch; margin: 10px; }
717+
</pre>
718+
</div>
719+
720+
702721
<h3 id="contain-fit-sizing">
703722
Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>
704723

0 commit comments

Comments
 (0)