Skip to content

[css-multicol] Specify intrinsic sizing of multicol #4952

@fantasai

Description

@fantasai

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions