Skip to content

Commit 0abd3e6

Browse files
tabatkinstabatkins
committed
[css-sizing] Try to actually define how % and intrinic sizes work. Relates to #1132.
1 parent 235175f commit 0abd3e6

1 file changed

Lines changed: 145 additions & 44 deletions

File tree

‎css-sizing-3/Overview.bs‎

Lines changed: 145 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -488,61 +488,162 @@ Stretch-fit Sizing</h3>
488488
Percentage Sizing</h3>
489489

490490
Percentages specify sizing of a box with respect to the box’s <a>containing block</a>.
491-
When calculating the <a>intrinsic size contribution</a> of the box,
492-
percentage sizes that would resolve against that box instead behave as ''width/auto''.
493491

494492
<div class="example">
495493
For example, in the following markup:
496494

497-
<pre class='lang-html'>
498-
&lt;div style="width: min-content">
499-
&lt;div style="width: 50%;">
500-
LOOOOOOOOOOOOOOOOOOOONG
501-
&lt;/div>
502-
&lt;/div>
503-
</pre>
504-
505-
When calculating the width of the outer div,
506-
the inner div behaves as ''width: auto'',
507-
so the outer div sets itself to the width of the long word.
508-
Since the outer div's width didn't depend on "real" layout,
509-
though, it's treated as <a>definite</a>
510-
for resolving the inner div,
511-
whose width resolves to half that of the outer div.
512-
</div>
513-
514-
Although this may require an additional layout pass to re-resolve percentages in some cases,
515-
a 'min-width' or 'min-height'
516-
with a value of ''min-width/min-content'', ''min-width/max-content'', ''min-width/fit-content'',
517-
or ''min-width/auto'' (or otherwise <a>behaving as auto</a>)
518-
does not prevent the resolution of percentage sizes of the box’s contents.
495+
<xmp class='lang-html'>
496+
<article style="height: 60em">
497+
<aside style="height: 50%;">
498+
</aside>
499+
</article>
500+
</xmp>
519501

520-
In order to prevent cyclic sizing in the general case,
521-
percentages do not otherwise resolve against <a>indefinite</a> sizes,
522-
and instead are treated as <css>auto</css>.
502+
the <code>&lt;aside></code> would be 30em tall.
503+
</div>
523504

524-
<div class="issue">
525-
We think the above paragraphs can be more accurately replaced by:
505+
Sometimes the size of a percentage-sized box's containing block
506+
depends on the intrinsic size contribution of the box itself,
507+
creating a cyclic dependency.
508+
When calculating the containing block's size,
509+
the percentage <a>behaves as auto</a>.
510+
Then, unless otherwise specified,
511+
when calculating the used sizes and positions of the containing block’s <em>contents</em>:
512+
513+
* If the cyclic dependency was introduced due to
514+
a 'block-size' or 'max-block-size' on the containing block
515+
that causes it to depend on the size of its contents,
516+
the box’s percentage is not resolved and instead <a>behaves as auto</a>.
517+
518+
Note: <a href="https://www.w3.org/TR/css-grid/">Grid containers</a> (<a href="https://github.com/w3c/csswg-drafts/issues/1679">and flex items?</a>) do allow percentages to resolve in this case.
519+
520+
* Otherwise, the percentage is resolved against the containing block’s size.
521+
(The containing block’s size is not re-resolved based on the resulting size of the box;
522+
the contents might thus overflow or underflow the containing block).
523+
524+
525+
Note: These rules specify the previously-undefined behavior of this cyclic case in <a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property">CSS2&sect;10.2</a>.
526+
Note also, the behavior in <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property">CSS2&sect;10.5</a>
527+
is superseded in their respective specifications for layout modes
528+
(such as <a href="http://www.w3.org/TR/css-flexbox/">flex layout</a>)
529+
not described in CSS2.
526530

527-
<blockquote>
528-
For the purpose of calculating the <a>intrinsic size contribution</a> of a box,
529-
an intrinsic 'min-width', 'min-height', or 'inline-size' cause the box's width/height to be treated as indefinite
530-
(and thus percentages that resolve against it behave as <css>auto</css>).
531531

532-
Although this may require an additional layout pass to re-resolve percentages in some cases,
533-
a 'min-width', 'min-height', or 'inline-size'
534-
with a value of ''min-width/min-content'', ''min-width/max-content'', ''min-width/fit-content'',
535-
or ''min-width/auto'' (or otherwise <a>behaving as auto</a>)
536-
does not prevent the resolution of percentage sizes of the box’s contents.
537-
</blockquote>
532+
<div class="example">
533+
For example, in the following markup:
538534

539-
...but we're not 100% sure.
535+
<xmp class='lang-html'>
536+
<article style="width: min-content">
537+
<aside style="width: 50%;">
538+
LOOOOOOOOOOOOOOOOOOOONG
539+
</aside>
540+
</article>
541+
</xmp>
542+
543+
When calculating the width of the outer <code>&lt;article></code>,
544+
the inner <code>&lt;aside></code> behaves as ''width: auto'',
545+
so the <code>&lt;article></code> sets itself to the width of the long word.
546+
Since the <code>&lt;article></code>’s width didn't depend on "real" layout,
547+
though, it's treated as <a>definite</a>
548+
for resolving the <code>&lt;aside></code>,
549+
whose width resolves to half that of the <code>&lt;article></code>.
550+
</div>
551+
552+
<div class="example">
553+
In this example,
554+
555+
<xmp class=lang-html>
556+
<article style="height:auto">
557+
<aside style="height: 50%;">
558+
<div class=block style="height: 150px;"></div>
559+
</aside>
560+
<section style="height: 30px;"></section>
561+
</article>
562+
</xmp>
563+
564+
because the percentage <a>block size</a> ('height', in this case) on block-level elements
565+
is defined to not resolve inside content-sized containing blocks,
566+
the percentage height on the <code>&lt;aside></code> is ignored,
567+
that is, it behaves exactly as if ''height/auto'' were specified.
540568
</div>
541569

542-
Note: See definition of percentage
543-
<a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property"><css>width</css></a>
544-
and <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property"><css>height</css></a>
545-
in [[CSS2]].
570+
<div class=example>
571+
Issue: Letting %s still resolve against a definite 'height'
572+
when the min-height is intrinsic is an open issue.
573+
(CSS2 has a general statement about "height depending on contents",
574+
which this technically is,
575+
even though CSS2 didn't have content-dependent keywords for 'min-height'.
576+
Since this is new, we think we could have this different behavior.)
577+
578+
The following examples illustrate how block-axis percentages resolve against a containing block whose size depends on its contents.
579+
580+
<xmp class=lang-html>
581+
<article style="height:100px; min-height: min-content;">
582+
<aside style="height: 50%;">
583+
<div style="height: 150px;"></div>
584+
</aside>
585+
<section style="height: 30px;"></section>
586+
</article>
587+
</xmp>
588+
589+
The initial height of the <code>&lt;article></code> is 100px, as specified,
590+
which would make the <code>&lt;aside></code> 50px tall
591+
when it resolved its percentage.
592+
However, we must calculate the min-height,
593+
by substituting it in for 'height'.
594+
This causes the percentage on the <code>&lt;aside></code> to <a>behave as auto</a>,
595+
so the <code>&lt;aside></code> ends up 150px tall.
596+
The total height of the contents is thus 180px.
597+
This is larger than the specified 100px height,
598+
so the <code>&lt;article></code> gets adjusted to 180px tall.
599+
600+
Then, since the percentage could <em>originally</em> resolve against the (100px) height,
601+
it now resolves against the 180px height,
602+
so the <code>&lt;aside></code> ends up being 90px tall.
603+
604+
<xmp class=lang-html>
605+
<article style="height:auto; min-height: min-content;">
606+
<aside style="height: 50%;">
607+
<div class=block style="height: 150px;"></div>
608+
</aside>
609+
<section style="height: 30px;"></section>
610+
</article>
611+
</xmp>
612+
613+
In this case, the percentage on the <code>&lt;aside></code> won't normally resolve,
614+
because the containing block's height is ''height/auto''
615+
(and thus depends on the size of its contents).
616+
Instead it <a>behaves as auto</a>,
617+
resulting in a height of 150px for the <code>&lt;aside></code>,
618+
and an initial height of 180px for the <code>&lt;article></code>
619+
The 'min-height' doesn't change this;
620+
''height: min-content;'' acts similarly to ''height: auto;''
621+
and results in the same sizes.
622+
623+
<xmp class=lang-html>
624+
<article style="height:100px; min-height: min-content;">
625+
<aside style="height: 200%;">
626+
<div style="height: 150px;"></div>
627+
</aside>
628+
<section style="height: 30px;"></section>
629+
</article>
630+
</xmp>
631+
632+
This is a variation on the first code block,
633+
and follows a similar path;
634+
the <code>&lt;aside></code> initially wants to compute to 200px tall
635+
(200% of the 100px containing block height).
636+
When we calculate the effects of 'min-height',
637+
the percentage <a>behaves as auto</a>,
638+
causing it to become 150px tall,
639+
and the total ''height/min-content'' height of the containing block
640+
to be 180px tall.
641+
Since this is larger than 100px,
642+
the <code>&lt;article></code> gets clamped to 180px,
643+
the percentage resolves against this new height,
644+
and the <code>&lt;aside></code> ends up being 360px tall,
645+
overflowing the <code>&lt;article></code>
646+
</div>
546647

547648
<h2 class=no-num id="changes">
548649
Changes</h2>

0 commit comments

Comments
 (0)