@@ -80,7 +80,7 @@ Terminology</h2>
80
80
81
81
<dt> <dfn id="definite" lt="definite|definite size">definite size</dfn>
82
82
<dd>
83
- A size that can be determined without measuring content ;
83
+ A size that can be determined without performing layout ;
84
84
that is, a <<length>> ,
85
85
a measure of text (without consideration of line-wrapping),
86
86
a size of the <a>initial containing block</a> ,
@@ -146,7 +146,7 @@ Auto Box Sizes</h3>
146
146
: <dfn>stretch-fit inline size</dfn>
147
147
: <dfn>stretch-fit block size</dfn>
148
148
:: Roughly, the <a>size</a> a box would take
149
- if it filled its <a>available space</a>
149
+ if it filled the <a>available space</a>
150
150
in the given axis.
151
151
(See [[#extrinsic]] .)
152
152
@@ -312,7 +312,7 @@ New Keywords for 'width' and 'height'</h3>
312
312
Containing Floats</h3>
313
313
314
314
Note: To ensure that a container sizes itself to contain any descendant floats,
315
- make sure it's a <a>formatting context</a> .
315
+ make sure it's a <a>formatting context</a> root .
316
316
For some layout modes, such as Grid and Flexbox,
317
317
this is true automatically.
318
318
For Block layout, this means using ''display: flow-root;'' .
@@ -462,6 +462,28 @@ Stretch-fit Sizing</h3>
462
462
Percentage Sizing</h3>
463
463
464
464
Percentages specify sizing of a box with respect to the box’s <a>containing block</a> .
465
+ When calculating the <a>intrinsic size contribution</a> of the box,
466
+ intrinsic sizes are instead treated as ''width/auto'' .
467
+
468
+ <div class="example">
469
+ For example, in the following markup:
470
+
471
+ <pre class='lang-html'>
472
+ <div style="width: min-content">
473
+ <div style="width: 50%;">
474
+ LOOOOOOOOOOOOOOOOOOOONG
475
+ </div>
476
+ </div>
477
+ </pre>
478
+
479
+ When calculating the width of the outer div,
480
+ the inner div is treated as ''width: auto'' ,
481
+ so the outer div sets itself to the width of the long word.
482
+ Since the outer div's width didn't depend on "real" layout,
483
+ though, it's treated as <a>definite</a>
484
+ for resolving the inner div,
485
+ whose width resolves to half that of the outer div.
486
+ </div>
465
487
466
488
Although this may require an additional layout pass to re-resolve percentages in some cases,
467
489
the ''min-width/auto'' , ''min-width/min-content'' , ''min-width/max-content'' , and ''min-width/fit-content'' values
0 commit comments