intrinsic-sizing-notes.bs

ISSUE: <strong>Need to Sync This Section With Level 3 It is Super Out Of Date</strong>

	<dfn export lt="intrinsic size">Intrinsic sizing</dfn> determines sizes based on the contents of a box,
	without regard for the context in which it is placed.

	Precisely how to calculate the [=intrinsic size=] of a box depends on its layout mode;
	the following subsections define intrinsic sizing for several types of layouts.
	Individual layout modes,
	such as Flexbox or Grid,
	can define their own intrinsic sizing rules.

	If a box has an [=explicit intrinsic inner size=] in an axis,
	then that is all of its [=intrinsic sizes=] in that axis.
	If the other axis does not have an [=explicit intrinsic inner size=],
	then its intrinsic sizes are determined normally,
	without regard for the [=explicit intrinsic inner size=] in the first axis.


<h3 id='replaced-intrinsic'>
Intrinsic Sizes of Replaced Elements</h3>

	<p>
		For replaced elements,
		the <a>min-content size</a> and <a>max-content size</a> are equivalent
		and correspond to the appropriate dimension of the concrete object size returned by
		the <a href="https://www.w3.org/TR/css3-images/#default-sizing">default sizing algorithm</a> [[!CSS3-IMAGES]]
		of the element,
		calculated with an unconstrained specified size.

	The <a>min-content contribution</a> and <a>max-content contribution</a> in each axis
	is the element's specified outer size in that axis, if definite;
	otherwise, they are the <a>min-content size</a>, as specified above,
	plus the element's margin/border/padding in that axis,
	clamped by the element's min and max size properties in that axis.

<h3 id='inline-intrinsic'>
Intrinsic Sizes of Non-Replaced Inlines</h3>

	<p>
		The <a>min-content inline size</a> of an inline box
		is the length of the largest unbreakable sequence of inline content.
		The <a>min-content inline-size contribution</a> of an inline box
		is its <a>min-content inline size</a>,
		plus any <a>inline-axis</a> margin, border, and padding
		adjacent to that sequence.

	<p>
		The <a>max-content inline size</a> of an inline box
		is the length of the largest sequence of inline content
		on a single line
		when only forced line breaks are taken.
		The <a>max-content inline-size contribution</a> of an inline box
		is its <a>max-content inline size</a>,
		plus any <a>inline-axis</a> margin, border, and padding
		adjacent to that sequence.

	<p>
		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
		are the distance from the head edge of the first line box
		to the foot edge of the last line box
		on which the inline appears.

<h3 id='block-intrinsic'>
Intrinsic Sizes of Non-Replaced Blocks</h3>

	<p>
		The <a>min-content inline size</a> of a <a>block container box</a>
		is the largest <a>min-content inline-size contribution</a>
		of its in-flow or floated children.

	<p>
		The <a>max-content inline size</a> of a <a>block container box</a>
		is the inline-size of the box after layout,
		if all children are sized under a <a>max-content constraint</a>.
	<p>
		If the computed inline-size of a <a>block-level box</a>
		is ''width/min-content'', ''width/max-content'', or a <a>definite size</a>,
		its <a>min-content inline-size contribution</a>
		is that size
		plus any <a>inline-axis</a> margin, border, and padding.
		Otherwise, if the computed inline-size of the block is ''width/fit-content'', ''width/auto'', or ''width/stretch'',
		its <a>min-content inline-size contribution</a>
		is its <a>min-content inline size</a>
		plus any <a>inline-axis</a> margin, border, and padding.

	<p>
		If the computed inline-size of a <a>block-level box</a>
		is ''width/min-content'', ''width/max-content'', or a <a>definite size</a>,
		its <a>max-content inline-size contribution</a>
		is that size
		plus any <a>inline-axis</a> margin, border, and padding.
		Otherwise, if the computed inline-size of the block is ''width/fit-content'', ''width/auto'', or ''width/stretch'',
		its <a>max-content inline-size contribution</a>
		is its <a>max-content inline size</a>
		plus any <a>inline-axis</a> margin, border, and padding.

	<p>
		The <a>min-content block size</a> and <a>max-content block size</a> of a <a>block container box</a>
		is the content block-size as defined
		(for horizontal writing modes)
		in <a href="https://www.w3.org/TR/CSS2/visudet.html#normal-block">CSS2.1§10.6.3</a>
		and <a href="https://www.w3.org/TR/CSS2/tables.html#height-layout">CSS2.1§17.5.3</a>
		for elements with ''height: auto'',
		and analogously for vertical writing modes.

	<p>
		The <a>min-content block-size contribution</a> and <a>max-content block-size contribution</a> of a <a>block-level box</a>
		is the block-size of the block after layout,
		plus any <a>block-axis</a> margin, border, and padding.

	Issue: Need to handle floats.
	See <a href="https://lists.w3.org/Archives/Public/www-style/2014Oct/0061.html">Greg's issue</a>
	and <a href="https://lists.w3.org/Archives/Public/www-style/2014Nov/0085.html">dbaron's response</a>.

<h3 id='table-intrinsic'>
Intrinsic Sizes in Table Layout</h3>

	<p class='issue'>
		¯\_(ツ)_/¯



<h3 id="multicol-intrinsic">
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.