Overview.bs

<h1>CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</h1>
<pre class='metadata'>
Shortname: css-sizing
Level: 3
Status: ED
Group: csswg
ED: http://dev.w3.org/csswg/css-sizing
TR: http://www.w3.org/TR/css3-sizing/
Editor: Tab Atkins, Google, http://xanthir.com/contact/
Editor: fantasai, Mozilla, http://fantasai.inkedblade.net/contact/
!Issue Tracking: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Sizing&amp;resolution=---">W3C Bugzilla</a>
Previous version: http://www.w3.org/TR/2012/WD-css3-sizing-20120927/
Abstract: This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context.
Link Defaults: css21 (property) min-width/min-height/max-width/max-height, css21 (dfn) containing block/initial containing block/block container box
Ignored Terms: block-level box
</pre>

<h2 id="intro">
Introduction</h2>

	<p><em>This section is not normative.</em>

	<p>
		CSS layout has several different concepts of automatic sizing that are used in various layout calculations.
		This section defines some more precise terminology
		to help connect the layout behaviors of this spec to the calculations used in other modules,
		and some new keywords for the 'width' and 'height' properties
		to allow authors to assign elements the dimensions resulting from these size calculations.

<h3 id="placement">
Module interactions</h3>

	<p>This module extends the 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', and 'column-width'
	features defined in [[!CSS21]] chapter 10 and in [[!CSS3COL]]

<h3 id="values">
Values</h3>

	<p>This specification follows the
	<a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
	definition conventions</a> from [[!CSS21]]. Value types not defined in
	this specification are defined in CSS Level 2 Revision 1 [[!CSS21]].
	Other CSS modules may expand the definitions of these value types: for
	example [[CSS3COLOR]], when combined with this module, expands the
	definition of the &lt;color&gt; value type as used in this specification.</p>

	<p>In addition to the property-specific values listed in their definitions,
	all properties defined in this specification also accept the
	<a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
	keyword as their property value. For readability it has not been repeated
	explicitly.

<h2 id="terms">
Terminology</h2>

	<dl export>
		<dt><dfn>size</dfn>
		<dd>
			A one- or two-dimensional measurement:
			a <a href="http://www.w3.org/TR/css3-writing-modes/#measure"><i>measure</i></a>
			and/or <a href="http://www.w3.org/TR/css3-writing-modes/#extent"><i>extent</i></a>;
			alternatively a width and/or height.

		<dt><dfn id="definite" title="definite|definite size">definite size</dfn>
		<dd>
			A size that can be determined without measuring content;
			that is, a <var>&lt;length></var>,
			a size of the <i>initial containing block</i>,
			or a <var>&lt;percentage></var> that is resolved against a <i>definite</i> size.
			Additionally, the size of the <i>containing block</i> of an absolutely positioned element is always <i>definite</i>
			with respect to that element.

		<dt><dfn id="indefinite" title="indefinite|indefinite size">indefinite size</dfn>
		<dd>
			A size that is not <i>definite</i>.
			An <i>indefinite</i> <i>available size</i> is essentially infinite.

		<dt><dfn id="available" title="available|available size|available measure|available extent|available space">available size</dfn>
		<dd>
			The space into which a box is laid out.
			Unless otherwise specified, this is
			either a measurement of its <i>containing block</i> (if that is <i>definite</i>)
			or an infinite size (when it is <i>indefinite</i>).
			An <i>available size</i> can alternatively be either a
			<i>min-content constraint</i> or
			a <i>max-content constraint</i>.

<!--
			<p>
				The space <i>available</i> to a box is determined by the formatting context in which it participates.
				In block, table, and inline formatting contexts [[!CSS21]],
				the <i>available size</i> is infinite in the block-axis dimension.
				<span class="issue">What, exactly, is the available size in the inline axis??? What about other formatting models?</span>
-->

		<dt><dfn>fill-available fit</dfn>
		<dd>
			The <i>fill-available fit</i> into a given size
			is that size,
			minus the element's computed margins (not collapsed, treating ''auto'' as zero),
			border, and padding in the given dimension.

			<p class='note'>
				Note: This is the formula used to calculate the ''auto'' widths
				of non-replaced blocks in normal flow in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

		<dt><dfn title="fallback|fallback size">fallback size</dfn>
		<dd>
			Some sizing algorithms do not work well with an infinite size.
			In these cases, the <i>fallback size</i> is used instead.
			Unless otherwise specified,
			this is the size of the <i>initial containing block</i>.

		<dt><dfn>fill-available measure</dfn>
		<dd>
			Roughly, the <i>measure</i> a box would take
			if it filled its <i>available measure</i>.
			(See <a href="http://dev.w3.org/csswg/css3-sizing/#extrinsic-sizing">Extrinsic Size Determination</a>.)

			<p class='note'>
				Note: This is called the “available width” in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
				and computed by the rules in <a href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

		<dt><dfn title="max-content measure|max-content size">max-content measure</dfn>
		<dd>
			Roughly, the narrowest <i>measure</i> a box could take while fitting around its contents
			if <em>none</em> of the soft wrap opportunities within the box were taken.
			(See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.)

			<p class='note'>
				Note: This is called the “preferred width” in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
				and the “maximum cell width” in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

		<dt><dfn title="min-content measure|min-content size">min-content measure</dfn>
		<dd>
			The narrowest <i>measure</i> a box could take
			that doesn't lead to inline-dimension overflow
			that could be avoided by choosing a larger <i>measure</i>.
			Roughly, the <i>measure</i> that would fit around its contents
			if <em>all</em> soft wrap opportunities within the box were taken.
			(See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.)

			<p class='note'>
				Note: This is called the “preferred minimum width” in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
				and the “minimum content width” in <a href="http://www.w3.org/TR/CSS21/tables.html#auto-table-layout">CSS2.1§17.5.2.2</a>.

		<dt><dfn>fit-content measure</dfn>
		<dd>
			If the <i>available</i> measure is finite,
			equal to <code>min(<i>preferred measure</i>, max(<i>min-content measure</i>, <i>fill-available measure</i>))</code>.
			Otherwise, equal to the <i>max-content measure</i>.

			<p class='note'>
				Note: This is called the “shrink-to-fit” width in <a href="http://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
				and <a href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm">CSS Multi-column Layout § 3.4</a>.

		<dt><dfn>preferred measure</dfn>
		<dd>
			A box’s “ideal” <i>measure</i>.
			Unless otherwise specified, this is the <i>max-content measure</i>.

		<dt><dfn>fill-available extent</dfn>
		<dd>
			Roughly, the <i>extent</i> a box would take
			if it filled its <i>available extent</i>.
			(See <a href="http://dev.w3.org/csswg/css3-sizing/#intrinsic-sizing">Intrinsic Size Determination</a>.)

		<dt><dfn>max-content extent</dfn>
		<dd>
			Roughly, the <i>extent</i> of the content after layout.

		<dt><dfn>min-content extent</dfn>
		<dd>
			Equivalent to the <i>max-content extent</i>.

			<p class="issue">
				Or should this be the minimum between allowed break points?
				It might make sense in multi-col contexts
				to have min-content and max-content extents be different,
				even if they are the same elsewhere.

		<dt><dfn>fit-content extent</dfn>
		<dd>
			Analogous to the <i>fit-content measure</i>.

		<dt><dfn>preferred extent</dfn>
		<dd>
			Equivalent to the <i>max-content extent</i>.

			<p class='issue'>
				Same issue as <i>min-content extent</i>.

		<dt><dfn title="max-content contribution|max-content measure contribution|max-content extent contribution">max-content contribution</dfn>
		<dd>
			The size that a box contributes to its <i>containing block</i>'s <i>max-content size</i>.

		<dt><dfn title="min-content contribution|min-content measure contribution|min-content extent contribution">min-content contribution</dfn>
		<dd>
			The size that a box contributes to its <i>containing block</i>'s <i>min-content size</i>.

		<dt><dfn>preferred-size contribution</dfn>
		<dd>
			If the box's layout mode has a defined <i>preferred-size contribution</i>, that.
			Otherwise, the box's <i>max-content contribution</i>.

		<dt><dfn>max-content constraint</dfn>
		<dd>
			A sizing constraint imposed by the box's <i>containing block</i>
			that causes it to produce its <i>max-content contribution</i>.

		<dt><dfn>min-content constraint</dfn>
		<dd>
			A sizing constraint imposed by the box's <i>containing block</i>
			that causes it to produce its <i>min-content contribution</i>.

		<dt><dfn>preferred-size constraint</dfn>
		<dd>
			A sizing constraint imposed by the box's <i>containing block</i>
			that causes it to produce its <i>preferred-size contribution</i>.
	</dl>

<h2 id='size-keywords'>
New Sizing Keywords</h2>

<h3 id='width-height-keywords'>
New Keywords for 'width' and 'height'</h3>

	<pre class=propdef partial>
	Name: width, min-width, max-width, height, min-height, max-height
	New values: fill | max-content | min-content | fit-content
	</pre>

	<p>There are four types of automatically-determined sizes in CSS (which
		are represented in the width and height properties by the keywords
		defined above):

	<dl dfn-type=value dfn-for="width min-width max-width height min-height max-height">
		<dt><dfn>fill</dfn>
		<dd>
			Use the <i>fill-available measure</i> or <i>fill-available extent</i>,
			as appropriate to the writing mode.

		<dt><dfn>max-content</dfn>
		<dd>
			Use the <i>max-content measure</i> or <i>max-content extent</i>,
			as appropriate to the writing mode.

		<dt><dfn>min-content</dfn>
		<dd>
			Use the <i>min-content measure</i> or <i>min-content extent</i>,
			as appropriate to the writing mode.

		<dt><dfn>fit-content</dfn>
		<dd>
			Use the <i>fit-content measure</i> or <i>fit-content extent</i>,
			as appropriate to the writing mode.

		<dt><dfn>repudiate-floats</dfn> <span class='issue'>Less stupid name?</span>
		<dd>
			In the inline axis,
			use the larger of the min-content measure,
			and the fill-available measure minus the size of any non-descendant floats in the same formatting context.
			(This is similar to the behavior of a box that establishes a formatting context next to a float.)
			In the block axis,
			this is identical to ''width/auto''.

			<p class='issue'>
				Does this value work?
				Is it needed?
				<a href="http://lists.w3.org/Archives/Public/www-style/2013Feb/0212.html">Feedback from dbaron</a>
	</dl>

	<p class="issue">
		Right now all of these except ''width/fill'' mean the same thing
		for extents. This may or may not be ideal.

	<p class='issue'>
		If the measure is ''width/auto'',
		we could have min-content extent imply a max-content measure,
		and vice versa.

	<p class='note'>
		Note that percentages resolved against the intrinsic sizes
		(''width/max-content'', ''width/min-content'', ''width/fit-content'', ''width/repudiate-floats'')
		will compute to ''width/auto'',
		<a href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">as defined by CSS 2.1</a>. [[!CSS21]]

<h3 id='the-contain-floats-value'>
Containing Floats</h3>

	<pre class="propdef partial">
	Name: min-width, min-height
	New values: contain-floats
	</pre>

	<dl>
		<dt><dfn for="min-width min-height" value>contain-floats</dfn>
		<dd>
			Equivalent to ''min-width/min-content''
			except that when applied to the extent of a block box
			it forces the inner extent to be large enough to contain
			the margin boxes of any floats that originate inside the block
			and that participate in the same block formatting context as the block's immediate contents.
	</dl>

<h3 id='column-sizing'>
Column Sizing Keywords</h3>

	<pre class="propdef partial">
	Name: column-width
	New values: fill | max-content | min-content | fit-content
	</pre>

	<p>When  used as values for <a href="http://www.w3.org/TR/css3-multicol/#cw">'column-width'</a>,
		the new keywords specify the optimal column width:

	<dl dfn-type=value dfn-for="column-width">
		<dt><dfn>fill</dfn>
		<dd>Specifies the optimal column width as the <i>fill-available measure</i>
			of the multi-column element.

		<dt><dfn>max-content</dfn>
		<dd>Specifies the optimal column width as the <i>max-content measure</i>
			of the multi-column element's contents.

		<dt><dfn>min-content</dfn>
		<dd>Specifies the optimal column width as the <i>min-content measure</i>
			of the multi-column element's contents.

		<dt><dfn>fit-content</dfn>
		<dd>Specifies the optimal column width as
			<code>min(<i>max-content measure</i>, max(<i>min-content measure</i>, <i>fill-available measure</i>))</code>.
	</dl>


<h2 id='intrinsic-sizing'>
Intrinsic Size Determination</h2>

	<p>
		<dfn export>Intrinsic sizing</dfn> determines sizes based on the contents of an element,
		without regard for its context.


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

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

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

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

	<p>
		The <i>max-content measure</i> 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 <i>max-content measure contribution</i> of an inline box
		is its <i>max-content measure</i>,
		plus any inline-axis margin, border, and padding
		adjacent to that sequence.

	<p>
		The <i>min-content extent</i>, <i>max-content extent</i>, <i>min-content extent contribution</i>, and <i>max-content extent contribution</i> 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 <i>min-content measure</i> of a <i>block container box</i>
		is the largest <i>min-content measure contribution</i>
		of its in-flow or floated children.

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

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

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

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


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

	<p class='issue'>
		???



<h3 id="multicol-intrinsic">
Intrinsic Sizes in Multi-column Layout</h3>

	<p>
		The <i>min-content measure</i> of a multi-column element
		with a computed 'column-width' not ''auto''
		is the smaller of
		its 'column-width'
		and the largest <i>min-content measure contribution</i> of its contents.

	<p>
		The <i>min-content measure</i> of a multi-column element
		with a computed 'column-width' of ''auto''
		is the largest <i>min-content measure contribution</i> of its contents
		multiplied by its 'column-count'
		(treating ''auto'' as ''1'').

	<p>
		The <i>max-content measure</i> of a multi-column element
		with unrestrained column heights
		and a computed 'column-count' not ''auto''
		is its 'column-count'
		multiplied by the larger of
		its 'column-width' (treating ''auto'' as 0)
		and the largest <i>max-content measure contribution</i> of its contents.

	<p>
		The <i>max-content measure</i> of a multi-column element
		with unrestrained column heights
		and a computed 'column-count' of ''auto''
		is its 'column-width'
		multiplied by the number of columns obtained by taking all allowed column breaks [[CSS3-BREAK]].

	<!--
	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.
	-->

	<p>
		The <i>max-content measure</i> of a multi-column element
		with restrained-height columns (i.e. a specified 'height' or 'max-height', or whichever properties map to the <a>extent</a> of the element)
		is the <i>measure</i> 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 measure that includes all the columns.

		<li>
			Laying out all of the column-spanning elements into that resulting measure,
			and taking the resulting extent.

		<li>
			Subtracting that resulting extent from the specified restraint,
			laying out the element without column-spanning elements again into this adjusted extent,
			and taking the measure of all its columns as its <i>max-content measure</i>.
	</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.

	<p>
		The <i>preferred measure</i> of a multi-column element
		with non-''auto'' 'column-width' and 'column-count'
		is the product of the 'column-width' and 'column-count',
		plus the appropriate amount of column gaps.
		In all other cases,
		it is the <i>max-content measure</i>.



<h2 id='extrinsic-sizing'>
Extrinsic Size Determination</h2>

	<p>
		<dfn export>Extrinsic sizing</dfn> determines sizes based on the context of an element,
		without regard for its contents.

	<p>
		The inner <i>fill-available measure</i> of a box is&hellip;
		<ul>
			<li>
				If the box is the root or is absolutely-positioned, the measure of its containing block, else
			<li>
				<code>max(<i>min-content measure</i>|0, min(<i>max-content measure</i>|infinity, <i>measure</i>|<i>fill-available measure</i>))</code>
				where the sizes are inner measures of the element establishing the box's <i>containing block</i>,
				and where the first value is used if it is <i>definite</i> and the second value otherwise.
		</ul>
	<p>
		&hellip;less the box's inline-axis margins
		(after any <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">margin collapsing</a>, and treating ''auto'' margins as zero),
		borders, and padding.

	<p>
		The <i>fill-available extent</i> of a box is defined analogously,
		but in the other dimension.

	<p class='issue'>
		This definition might end up skipping further up the ancestor chain than we'd like in some cases.
		<a href="http://lists.w3.org/Archives/Public/www-style/2012Oct/0204.html">Example.</a>
		Maybe it should stop at each formatting root, or something similar?

<h2 class=no-num id="acknowledgments">
Acknowledgments</h2>

	<p>Special thanks go to Aaron Gustafson, L. David Baron
	for their contributions to this module.