You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -264,8 +264,12 @@ New Keywords for 'width' and 'height'</h3>
264
264
as appropriate to the writing mode.
265
265
</dl>
266
266
267
+
Issue: Is ''fill'' stable enough or should we defer to L4?
268
+
Is the name clear enough, or should it be reverted to ''fill-available''
269
+
(or changed to something else)?
270
+
267
271
Note: To size an element such that it avoids overlapping sibling floats,
268
-
make sure it's a <a>formatting context</a>.
272
+
make sure it's a <a>formatting context</a> root.
269
273
For some layout modes, such as Grid and Flexbox,
270
274
this is true automatically.
271
275
For Block layout, this means using ''display: flow-root;''.
@@ -343,188 +347,36 @@ Intrinsic Sizes of Replaced Elements</h3>
343
347
of the element,
344
348
calculated with an unconstrained specified size.
345
349
346
-
The <a>min-content contribution</a> and <a>max-content contribution</a> in each axis
347
-
is the element's specified outer size in that axis, if definite;
348
-
otherwise, they are the <a>min-content size</a>, as specified above,
349
-
plus the element's margin/border/padding in that axis,
350
-
clamped by the element's min and max size properties in that axis.
351
-
352
350
<h3 id='inline-intrinsic'>
353
-
Intrinsic Sizes of Non-Replaced Inlines</h3>
354
-
355
-
<p>
356
-
The <a>min-content inline size</a> of an inline box
357
-
is the length of the largest unbreakable sequence of inline content.
358
-
The <a>min-content inline-size contribution</a> of an inline box
359
-
is its <a>min-content inline size</a>,
360
-
plus any <a>inline-axis</a> margin, border, and padding
361
-
adjacent to that sequence.
362
-
363
-
<p>
364
-
The <a>max-content inline size</a> of an inline box
365
-
is the length of the largest sequence of inline content
366
-
on a single line
367
-
when only forced line breaks are taken.
368
-
The <a>max-content inline-size contribution</a> of an inline box
369
-
is its <a>max-content inline size</a>,
370
-
plus any <a>inline-axis</a> margin, border, and padding
371
-
adjacent to that sequence.
372
-
373
-
<p>
374
-
The <a>min-content block size</a>, <a>max-content block size</a>, <a>min-content block-size contribution</a>, and <a>max-content block-size contribution</a> of an inline box
375
-
are the distance from the head edge of the first line box
376
-
to the foot edge of the last line box
377
-
on which the inline appears.
378
-
379
-
<h3 id='block-intrinsic'>
380
-
Intrinsic Sizes of Non-Replaced Blocks</h3>
381
-
382
-
<p>
383
-
The <a>min-content inline size</a> of a <a>block container box</a>
384
-
is the largest <a>min-content inline-size contribution</a>
385
-
of its in-flow or floated children.
386
-
387
-
<p>
388
-
The <a>max-content inline size</a> of a <a>block container box</a>
389
-
is the inline-size of the box after layout,
390
-
if all children are sized under a <a>max-content constraint</a>.
391
-
<p>
392
-
If the computed inline-size of a <a>block-level box</a>
393
-
is ''width/min-content'', ''width/max-content'', or a <a>definite size</a>,
394
-
its <a>min-content inline-size contribution</a>
395
-
is that size
396
-
plus any <a>inline-axis</a> margin, border, and padding.
397
-
Otherwise, if the computed inline-size of the block is ''width/fit-content'', ''width/auto'', or ''width/fill'',
398
-
its <a>min-content inline-size contribution</a>
399
-
is its <a>min-content inline size</a>
400
-
plus any <a>inline-axis</a> margin, border, and padding.
401
-
402
-
<p>
403
-
If the computed inline-size of a <a>block-level box</a>
404
-
is ''width/min-content'', ''width/max-content'', or a <a>definite size</a>,
405
-
its <a>max-content inline-size contribution</a>
406
-
is that size
407
-
plus any <a>inline-axis</a> margin, border, and padding.
408
-
Otherwise, if the computed inline-size of the block is ''width/fit-content'', ''width/auto'', or ''width/fill'',
409
-
its <a>max-content inline-size contribution</a>
410
-
is its <a>max-content inline size</a>
411
-
plus any <a>inline-axis</a> margin, border, and padding.
412
-
413
-
<p>
414
-
The <a>min-content block size</a> and <a>max-content block size</a> of a <a>block container box</a>
415
-
is the content block-size as defined
416
-
(for horizontal writing modes)
417
-
in <a href="https://www.w3.org/TR/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
418
-
and <a href="https://www.w3.org/TR/CSS21/tables.html#height-layout">CSS2.1§17.5.3</a>
419
-
for elements with ''height: auto'',
420
-
and analogously for vertical writing modes.
421
-
422
-
<p>
423
-
The <a>min-content block-size contribution</a> and <a>max-content block-size contribution</a> of a <a>block-level box</a>
424
-
is the block-size of the block after layout,
425
-
plus any <a>block-axis</a> margin, border, and padding.
426
-
427
-
Issue: Need to handle floats.
428
-
See <a href="https://lists.w3.org/Archives/Public/www-style/2014Oct/0061.html">Greg's issue</a>
429
-
and <a href="https://lists.w3.org/Archives/Public/www-style/2014Nov/0085.html">dbaron's response</a>.
351
+
Intrinsic Sizes of Other Boxes</h3>
430
352
431
-
<h3 id='table-intrinsic'>
432
-
Intrinsic Sizes in Table Layout</h3>
353
+
The <a>min-content size</a> of a box is the size it would have as an
354
+
''width/auto''-sized float in a zero-sized containing block.
355
+
(In other words, the minimum size it has when sized as “shrink-to-fit”.)
433
356
434
-
<p class='issue'>
435
-
???
436
-
437
-
438
-
439
-
<h3 id="multicol-intrinsic">
440
-
Intrinsic Sizes in Multi-column Layout</h3>
441
-
442
-
443
-
<h4 id="multicol-min-content">
444
-
Min-content Sizes in Multi-column Layout</h3>
445
-
446
-
<p>
447
-
The <a>min-content inline size</a> of a multi-column element
448
-
with a computed 'column-width' not ''column-width/auto''
449
-
is the smaller of
450
-
its 'column-width'
451
-
and the largest <a>min-content inline-size contribution</a> of its contents.
452
-
453
-
<p>
454
-
The <a>min-content inline size</a> of a multi-column element
455
-
with a computed 'column-width' of ''column-width/auto''
456
-
is the largest <a>min-content inline-size contribution</a> of its contents
457
-
multiplied by its 'column-count'
458
-
(treating ''column-count/auto'' as ''1'').
459
-
460
-
<h4 id="multicol-max-content">
461
-
Max-content Sizes in Unconstrained-height Multi-column Layout</h3>
357
+
The <a>max-content size</a> of a box is the size it would have as an
358
+
''width/auto''-sized float in an infinitely-sized containing block.
359
+
(In other words, the maximum size it has when sized as “shrink-to-fit”.)
462
360
463
-
<p>
464
-
The <a>max-content inline size</a> of a multi-column element
465
-
with unrestrained column heights
466
-
and a computed 'column-count' not ''column-count/auto''
467
-
is its 'column-count'
468
-
multiplied by the larger of
469
-
its 'column-width' (treating ''column-width/auto'' as zero)
470
-
and the largest <a>min-content inline-size contribution</a> of its contents.
471
-
472
-
<p class="note">
473
-
Note that the contents of the multi-column element
474
-
can still grow to be wider and shorter
475
-
if the resulting column width is still smaller
476
-
than the largest <a>max-content inline-size contribution</a> of its contents.
477
-
478
-
<p>
479
-
The <a>max-content inline size</a> of a multi-column element
480
-
with unrestrained column heights
481
-
and a computed 'column-count' of ''column-count/auto''
482
-
is its 'column-width'
483
-
multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]].
484
-
485
-
<!--
486
-
The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
487
-
These definitions make multicols work well in flexbox,
488
-
both in ''stretch'' and non-''stretch'' cases,
489
-
without wasted space or needless overflow.
490
-
-->
491
-
492
-
<h4 id="multicol-max-content-restrained">
493
-
Max-content Sizes in Constrained-height Multi-column Layout</h3>
361
+
Note: This specification does not define how to determine these sizes.
362
+
Please refer to [[CSS21]],
363
+
the relevant CSS specification for that display type,
364
+
and/or existing implementations
365
+
for further details.
494
366
495
-
<p>
496
-
The <a>max-content inline size</a> of a multi-column element
497
-
with restrained-height columns (i.e. a specified 'height' or 'max-height', or whichever properties map to the <a>block size</a> of the element)
498
-
is the <a>inline size</a> that would exactly include all of its columns.
499
-
It may be approximated by:
367
+
<h3 id="intrinsic-contribution">
500
368
501
-
<ul>
502
-
<li>
503
-
Laying out the element with column-spanning elements given ''display: none'',
504
-
and taking a inline-size that includes all the columns.
505
-
506
-
<li>
507
-
Laying out all of the column-spanning elements into that resulting inline-size,
508
-
and taking the resulting block-size.
509
-
510
-
<li>
511
-
Subtracting that resulting block-size from the specified restraint,
512
-
laying out the element without column-spanning elements again into this adjusted block-size,
513
-
and taking the inline-size of all its columns as its <a>max-content inline size</a>.
514
-
</ul>
369
+
A box’s <a>min-content contribution</a>/<a>max-content contribution</a> in each axis
370
+
is the size of the content box
371
+
of a hypothetical ''width/auto''-sized float
372
+
that contains only that box,
373
+
if that hypothetical float's containing block is zero-sized/infinitely-sized.
515
374
516
-
<p>
517
-
or by some more accurate method.
518
-
519
-
<p class='note'>
520
-
This approximation can result in some slack,
521
-
but avoids overflow in the most common cases,
522
-
where the balanced height of the columns above spanning elements are approximately equal.
523
-
524
-
<p class='note'>
525
-
In the common case of no column-spanning elements,
526
-
this approximation collapses to simply doing a layout,
527
-
and measuring the resulting columns.
375
+
Note: This specification does not define how to determine these sizes.
376
+
Please refer to [[CSS21]],
377
+
the relevant CSS specification for that display type,
378
+
and/or existing implementations
379
+
for further details.
528
380
529
381
<h2 id='extrinsic'>
530
382
Extrinsic Size Determination</h2>
@@ -582,19 +434,11 @@ Fill-available Sizing</h3>
582
434
Changes</h2>
583
435
584
436
<p>
585
-
Changes since the <a href="https://www.w3.org/TR/2012/WD-css3-sizing-20120927/">September 2012 Working Draft</a> include:
437
+
Changes since the INSERT DATED DRAFT HERE AFTER PUBLISHING A NEW OLD ONE.
586
438
587
439
<ul>
588
-
<li>Changed <code>fill-available</code> keyword to <code>fill</code>.
589
-
<li>Hooked up intrinsic sizes of replaced elements to the <a>default sizing algorithm</a> in [[!CSS3-IMAGES]].
590
-
<li>Specified that <a>extrinsic sizing</a> treates ''margin/auto'' margins as zero.
591
-
<li>Clarified definition of <a>available size</a>.
592
-
<li>Specified that percentages resolved against an intrinsic size of the parent computes falls back to auto sizing.
593
-
<li>Fixed bad wording wrt containing blocks in <a>fill-available inline size</a> definition,
594
-
and specified that it is calculated <em>after</em> margin collapsing.
595
-
<li>Specified that an absolutely-positioned box's containing block is always considered definite.
596
-
<li>Improved section on intrinsic sizing of multi-column elements.
597
-
<li>Cleaned up some terminology (“min-size” to “min-content size”, “measure” to “inline-size, “extent” to “block-size”).
440
+
<li>Removed normative definitions of the various sizes, deferring to CSS2.1's “undefined” for floats.
441
+
(We will restore these details in a Level 4 draft.)
0 commit comments