Skip to content

Commit c805f56

Browse files
committed
[css-sizing] Clarify how %s work when resolving against an intrinsic containing block, with example.
1 parent a8b2aef commit c805f56

File tree

1 file changed

+23
-1
lines changed

1 file changed

+23
-1
lines changed

css-sizing/Overview.bs

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -569,9 +569,31 @@ Fill-available Sizing</h3>
569569
Maybe it should stop at each formatting root, or something similar?
570570

571571
<h3 id="percentage-sizing">
572-
Percentage Sizing</h3>
572+
Percentage Sizing</h3>
573573

574574
Percentages specify sizing of a box with respect to the box’s <a>containing block</a>.
575+
When calculating the <a>intrinsic size contribution</a> of the box,
576+
intrinsic sizes are instead treated as ''width/auto''.
577+
578+
<div class="example">
579+
For example, in the following markup:
580+
581+
<pre class='lang-html'>
582+
&lt;div style="width: min-content">
583+
&lt;div style="width: 50%;">
584+
LOOOOOOOOOOOOOOOOOOOONG
585+
&lt;/div>
586+
&lt;/div>
587+
</pre>
588+
589+
When calculating the width of the outer div,
590+
the inner div is treated as ''width: auto'',
591+
so the outer div sets itself to the width of the long word.
592+
Since the outer div's width didn't depend on "real" layout,
593+
though, it's treated as <a>definite</a>
594+
for resolving the inner div,
595+
whose width resolves to half that of the outer div.
596+
</div>
575597

576598
Although this may require an additional layout pass to re-resolve percentages in some cases,
577599
the ''min-width/auto'', ''min-width/min-content'', ''min-width/max-content'', and ''min-width/fit-content'' values

0 commit comments

Comments
 (0)