@@ -569,9 +569,31 @@ Fill-available Sizing</h3>
569
569
Maybe it should stop at each formatting root, or something similar?
570
570
571
571
<h3 id="percentage-sizing">
572
- Percentage Sizing</h3>
572
+ Percentage Sizing</h3>
573
573
574
574
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
+ <div style="width: min-content">
583
+ <div style="width: 50%;">
584
+ LOOOOOOOOOOOOOOOOOOOONG
585
+ </div>
586
+ </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>
575
597
576
598
Although this may require an additional layout pass to re-resolve percentages in some cases,
577
599
the ''min-width/auto'' , ''min-width/min-content'' , ''min-width/max-content'' , and ''min-width/fit-content'' values
0 commit comments