@@ -654,9 +654,11 @@ Stretch-fit Sizing: filling the containing block</h3>
654
654
Additionally,
655
655
in [=formatting contexts=] and axes in which the relevant [=self-alignment property=] does not apply
656
656
(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
660
662
instead of the box indicated by 'box-sizing' .
661
663
For this purpose, ''margin/auto'' margins are treated as zero,
662
664
and furthermore, for [=block-level boxes=] in particular,
@@ -665,6 +667,10 @@ Stretch-fit Sizing: filling the containing block</h3>
665
667
if its parent’s [=sizing properties=] all had their [=initial values=] ,
666
668
then its block-start/block-end [=margin=] is treated as zero.
667
669
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
+
668
674
<div class="example">
669
675
For example, given the following HTML representing two [=block boxes=] :
670
676
<pre class=html>
@@ -699,6 +705,19 @@ Stretch-fit Sizing: filling the containing block</h3>
699
705
</pre>
700
706
</div>
701
707
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
+
702
721
<h3 id="contain-fit-sizing">
703
722
Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>
704
723
0 commit comments