[css-multicol] Specify intrinsic sizing of multicol
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
There's a first draft in Sizing 4 that's never made it into the WD, probably belongs in multicol. @tabatkins and I wrote these rules give the author-expected behavior; there was pushback from implementers on the fixed-height max-content width case because width depended on layout, but the implemented behavior was nonsense... Copying here for future reference.
Intrinsic Sizes in Multi-column Layout</h3>
<h4 id="multicol-min-content">
Min-content Sizes in Multi-column Layout</h3>
<p>
The <a>min-content inline size</a> of a multi-column container
with a computed 'column-width' not ''column-width/auto''
is the smaller of
its 'column-width'
and the largest <a>min-content inline-size contribution</a> of its contents.
<p>
The <a>min-content inline size</a> of a multi-column container
with a computed 'column-width' of ''column-width/auto''
is the largest <a>min-content inline-size contribution</a> of its contents
multiplied by its 'column-count'
(treating ''column-count/auto'' as ''1''),
plus its 'column-gap' multiplied by 'column-count' minus 1.
<h4 id="multicol-max-content">
Max-content Sizes in Unconstrained-height Multi-column Layout</h3>
<p>
The <a>max-content inline size</a> of a multi-column container
with unrestrained column heights
and a computed 'column-count' not ''column-count/auto''
is its 'column-count'
multiplied by the larger of
its 'column-width' (treating ''column-width/auto'' as zero)
and the largest <a>min-content inline-size contribution</a> of its contents,
plus its 'column-gap' multiplied by 'column-count' minus 1.
<p class="note">
Note that the contents of the multi-column container
can still grow to be wider and shorter
if the resulting column width is still smaller
than the largest <a>max-content inline-size contribution</a> of its contents.
<p>
The <a>max-content inline size</a> of a multi-column container
with unrestrained column heights
and a computed 'column-count' of ''column-count/auto''
is its 'column-width'
multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]],
plus its 'column-gap' multiplied by that same number of columns minus 1.
<!--
The above was decided based on dholbert's example in http://lists.w3.org/Archives/Public/www-style/2012Oct/0017.html .
These definitions make multicols work well in flexbox,
both in ''stretch'' and non-''stretch'' cases,
without wasted space or needless overflow.
-->
<h4 id="multicol-max-content-restrained">
Max-content Sizes in Constrained-height Multi-column Layout</h3>
<p>
The <a>max-content inline size</a> of a multi-column container
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)
is the <a>inline size</a> that would exactly include all of its columns.
It may be approximated by:
<ul>
<li>
Laying out the element with column-spanning elements given ''display: none'',
and taking a inline-size that includes all the columns.
<li>
Laying out all of the column-spanning elements into that resulting inline-size,
and taking the resulting block-size.
<li>
Subtracting that resulting block-size from the specified restraint,
laying out the element without column-spanning elements again into this adjusted block-size,
and taking the inline-size of all its columns as its <a>max-content inline size</a>.
</ul>
<p>
or by some more accurate method.
<p class='note'>
This approximation can result in some slack,
but avoids overflow in the most common cases,
where the balanced height of the columns above spanning elements are approximately equal.
<p class='note'>
In the common case of no column-spanning elements,
this approximation collapses to simply doing a layout,
and measuring the resulting columns.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the copied intrinsic-sizing rules with the current Sizing 4 and Multicol drafts, then review the implementer concerns about the fixed-height max-content width case. Done means reaching agreement on the rules and incorporating the resolved text into the appropriate Working Draft.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100