Overview.bs

<pre class='metadata'>
Title: CSS Intrinsic &amp; Extrinsic Sizing Module Level 4
Shortname: css-sizing
Level: 4
Status: ED
Warning: not ready
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-sizing
TR: https://www.w3.org/TR/css-sizing/
Editor: Tab Atkins, Google, http://xanthir.com/contact/
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Previous version: https://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.
Ignored Terms: block-level box
</pre>

<pre class='link-defaults'>
spec:css-display-3; type:dfn; text:box
spec:css21; type: property
	text: min-width
	text: min-height
	text: max-width
	text: max-height
</pre>


<!-- Notes on stuff to do... [copy/pasted from etherpad, probably out-of-date, evaluate later]
  Swap definition of preferred size in for max-content.
  Define current max-content as super-max-content.
  Mark an isssue about whether it's a necessary concept;
  I'm unsure, but I think it will show up in orthogonal flow sizing.
-->

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

	This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
	Value types not defined in this specification are defined in CSS Values & Units [[!CSS-VALUES-3]].
	Other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> keywords as their property value.
	For readability they have not been repeated explicitly.

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

	<dl export>
		<dt><dfn>size</dfn>
		<dd>
			A one- or two-dimensional measurement:
			a <a>block size</a> and/or <a>inline size</a>;
			alternatively a width and/or height.

		<dt><dfn>inner size</dfn>
		<dd>
			The <a href="https://www.w3.org/TR/css2/box.html#box-dimensions">content-box</a> size of a <a>box</a>.
		<dt><dfn>outer size</dfn>
		<dd>
			The <a href="https://www.w3.org/TR/css2/box.html#box-dimensions">margin-box</a> size of a <a>box</a>.

		<dt><dfn id="definite" lt="definite|definite size">definite size</dfn>
		<dd>
			A size that can be determined without performing layout;
			that is, a <<length>>,
			a measure of text (without consideration of line-wrapping),
			a size of the <a>initial containing block</a>,
			or a <<percentage>> or other formula
			(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS21]])
			that is resolved solely against <a>definite</a> sizes.

			Additionally, the size of the <a>containing block</a> of an absolutely positioned element is always <a>definite</a>
			with respect to that element.

		<dt><dfn id="indefinite" lt="indefinite|indefinite size">indefinite size</dfn>
		<dd>
			A size that is not <a>definite</a>.
			<a>Indefinite</a> <a>available space</a> is essentially infinite.

		<dt><dfn id="available" local-lt="available" lt="available space|available inline space|available block space">available space</dfn>
		<dd>
			A size representing the space into which a box is laid out,
			as determined by
			the rules of the formatting context in which it participates.
			The space available to a box is usually
			either a measurement of its <a>containing block</a> (if that is <a>definite</a>)
			or an infinite size (when it is <a>indefinite</a>).
			<a>Available space</a> can alternatively be either a
			<a>min-content constraint</a> or
			a <a>max-content constraint</a>.
<!--
			<p>

				In block, table, and inline formatting contexts [[!CSS21]],
				the <a>available space</a> is infinite in the block-axis dimension.
				<span class="issue">What, exactly, is the available space in the inline axis??? What about other formatting models?</span>
-->

		<dt><dfn>stretch fit</dfn>
		<dd>
			The <a>stretch fit</a> into a given size
			is that size,
			minus the element's computed margins (not collapsed, treating ''margin/auto'' as zero),
			border, and padding in the given dimension
			(such that the outer size is a perfect fit),
			and flooring at zero
			(so that the inner size is not negative).

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

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

<h3 id='auto-box-sizes'>
Auto Box Sizes</h3>

	<div export>
		: <dfn>stretch-fit size</dfn>
		: <dfn>stretch-fit inline size</dfn>
		: <dfn>stretch-fit block size</dfn>
		:: Roughly, the <a>size</a> a box would take
			if it filled the <a>available space</a>
			in the given axis.
			(See [[#extrinsic]].)

			Note: For the <a>inline axis</a>, this is called the “available width” in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
			and computed by the rules in <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.

		: <dfn lt="max-content | max-content size">max-content size</dfn>
		:: A box’s “ideal” <a>size</a> in a given axis when given infinite available space.
			Usually this is the smallest <a>size</a> the box could take in that axis
			while still fitting around its contents,
			i.e. minimizing unfilled space while avoiding overflow.

			: <dfn>max-content inline size</dfn>
			:: The box's “ideal” <a>size</a> in the <a>inline axis</a>.
				Usually the narrowest <a>inline size</a> it could take while fitting around its contents
				if <em>none</em> of the soft wrap opportunities within the box were taken.
				(See [[#intrinsic]].)

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

			: <dfn>max-content block size</dfn>
			:: The box's “ideal” <a>size</a> in the <a>block axis</a>.
				Usually the <a>block size</a> of the content after layout.

		: <dfn lt="min-content | min-content size">min-content size</dfn>
		:: The smallest <a>size</a> a box could take
			that doesn't lead to overflow
			that could be avoided by choosing a larger <a>size</a>.
			(See [[#intrinsic]].)

			: <dfn>min-content inline size</dfn>
			:: The narrowest <a>inline size</a> a box could take
				that doesn't lead to inline-dimension overflow
				that could be avoided by choosing a larger <a>inline size</a>.
				Roughly, the <a>inline size</a> that would fit around its contents
				if <em>all</em> soft wrap opportunities within the box were taken.

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

			: <dfn>min-content block size</dfn>
			:: Equivalent to the <a>max-content block size</a>.

				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 block-sizes be different,
				even if they are the same elsewhere.

		: <dfn>fit-content size</dfn>
		: <dfn>fit-content inline size</dfn>
		: <dfn>fit-content block size</dfn>
		:: If the <a>available space</a> in a given axis is finite,
			equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>.
			Otherwise, equal to the <a>max-content size</a> in that axis.

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

<h3 id='contributions' dfn export lt="intrinsic size contribution">
Intrinsic Size Contributions</h3>

	<dl export>
		<dt><dfn lt="max-content contribution|max-content inline-size contribution|max-content block-size contribution">max-content contribution</dfn>
		<dd>
			The size that a box contributes to its <a>containing block</a>'s <a>max-content size</a>.

		<dt><dfn lt="min-content contribution|min-content inline-size contribution|min-content block-size contribution">min-content contribution</dfn>
		<dd>
			The size that a box contributes to its <a>containing block</a>'s <a>min-content size</a>.
	</dl>

	Intrinsic size contributions are based on the <a>outer size</a> of the box;
	for this purpose ''margin/auto'' margins are treated as zero.

<h3 id='constraints' dfn export lt="intrinsic size constraint">
Intrinsic Size Constraints</h3>

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

		<dt><dfn>min-content constraint</dfn>
		<dd>
			A sizing constraint imposed by the box's <a>containing block</a>
			that causes it to produce its <a>min-content contribution</a>.
	</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: stretch | max-content | min-content | fit-content | fit-content(<<length-percentage>>)
	</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>stretch</dfn>
		<dd>
			Use the <a>stretch-fit inline size</a> or <a>stretch-fit block size</a>,
			as appropriate to the writing mode.

			NOTE: This is the formula used to calculate ''width/auto'' widths
			for non-replaced blocks in normal flow, see <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">CSS2.1§10.3.3</a>.
			It allows re-using this formula for boxes that are otherwise shrink-wrapped,
			like tables.

		<dt><dfn>max-content</dfn>
		<dd>
			If specified for the inline axis,
			use the <a>max-content inline size</a>;
			otherwise compute to ''width/auto''.

		<dt><dfn>min-content</dfn>
		<dd>
			If specified for the inline axis,
			use the <a>min-content inline size</a>;
			otherwise compute to ''width/auto''.

		<dt><dfn>fit-content</dfn>
		<dd>
			If specified for the inline axis,
			use the <a>max-content inline size</a>
			i.e.
			<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>;
			otherwise compute to ''width/auto''.

		<dt><dfn>fit-content(<<length-percentage>>)</dfn>
		<dd>
			If specified for the inline axis,
			use the fit-content formula
			with the <a>available space</a> replaced by the specified argument,
			i.e.
			<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <<length-percentage>>))</code>;
			otherwise compute to ''width/auto''.
	</dl>

	Note: To size an element such that it avoids overlapping sibling floats,
	make sure it's a <a>formatting context</a>.
	For some layout modes, such as Grid and Flexbox,
	this is true automatically.
	For Block layout, this means using ''display: flow-root;''.

	<p class='note'>
		Note that percentages resolved against the intrinsic sizes
		(''width/max-content'', ''width/min-content'', ''width/fit-content'')
		will compute to ''width/auto'',
		<a href="https://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>

	Note: To ensure that a container sizes itself to contain any descendant floats,
	make sure it's a <a>formatting context</a>.
	For some layout modes, such as Grid and Flexbox,
	this is true automatically.
	For Block layout, this means using ''display: flow-root;''.

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

	<pre class="propdef partial">
	Name: column-width
	New values: stretch | max-content | min-content | fit-content | fit-content(<<length-percentage>>)
	</pre>

	<p>When  used as values for 'column-width',
		the new keywords specify the optimal column width:

	<dl dfn-type=value dfn-for="column-width">
		<dt><dfn>stretch</dfn>
		<dd>Specifies the optimal column width as the <a>stretch-fit inline size</a>
			of the multi-column element.

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

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

		<dt><dfn>fit-content</dfn>
		<dd>Specifies the optimal column width as
			<code>min(<a>max-content inline size</a>, max(<a>min-content inline size</a>, <a>stretch-fit inline size</a>))</code>.

		<dt><dfn>fit-content(<<length-percentage>>)</dfn>
		<dd>
			Specifies the optimal column width as
			<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <<length-percentage>>))</code>
	</dl>

<h2 id='intrinsic'>
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 <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/CSS21/visudet.html#normal-block">CSS2.1§10.6.3</a>
		and <a href="https://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 <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 element
		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 element
		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 element
		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 element
		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 element
		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 element
		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.

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

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

<h3 id="stretch-fit-sizing">
Stretch-fit Sizing</h3>

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

		Issue: Shouldn't this be ignoring margin collapsing?

	<p>
		The <a>stretch-fit block size</a> 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?



<h3 id="contain-fit-sizing">
Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>

	Contain-fit sizing essentially applies stretch-fit sizing,
	but reduces the size of the box in one axis
	to maintain the box’s intrinsic aspect ratio,
	similar to the ''contain'' keyword of the 'object-fit' and 'background-size' properties.

	First, a target rectangle is determined:

	<ol>
		<li>
			The initial target rectangle is the size of the box’s containing block,
			with any indefinite size assumed as infinity.
			If both dimensions are indefinite,
			the initial target rectangle is set
			to match the outer edges of the box were it <a>stretch-fit sized</a>.

		<li>
			Next, if the box has a non-''max-width/none'' 'max-width' or 'max-height',
			the target rectangle is clamped in the affected dimension
			to less than or equal to the “maximum size” of the box’s margin box,
			i.e. the size its margin box would be
			if the box was sized at its max-width/height.
			(Note that, consistent with normal <a href="http://www.w3.org/TR/CSS2/visuren.html">box-sizing rules</a>,
			this “maximum size” is floored by the effects of the box’s 'min-width'/'min-height'.)

		<li>
			Last, the target rectangle is reduced in one dimension
			by the minimum necessary for it to match the box's intrinsic aspect ratio.
	</ol>

	The contain-fit size in each dimension is
	the size that would result from stretch-fitting into the target rectangle.

	Issue: Copy whatever stretch-fit ends up doing wrt margin collapsing.

	Issue: If there is a minimum size in one dimension
	that would cause overflow of the target rectangle if the aspect ratio were honored,
	do we honor the aspect ratio or skew the image?
	If the former, we need a step similar to #2 that applies the relevant minimums.

<h3 id="percentage-sizing">
Percentage Sizing</h3>

	Percentages specify sizing of a box with respect to the box’s <a>containing block</a>.
	When calculating the <a>intrinsic size contribution</a> of the box,
	intrinsic sizes are instead treated as ''width/auto''.

	<div class="example">
		For example, in the following markup:

		<pre class='lang-html'>
			&lt;div style="width: min-content">
				&lt;div style="width: 50%;">
					LOOOOOOOOOOOOOOOOOOOONG
				&lt;/div>
			&lt;/div>
		</pre>

		When calculating the width of the outer div,
		the inner div is treated as ''width: auto'',
		so the outer div sets itself to the width of the long word.
		Since the outer div's width didn't depend on "real" layout,
		though, it's treated as <a>definite</a>
		for resolving the inner div,
		whose width resolves to half that of the outer div.
	</div>

	Although this may require an additional layout pass to re-resolve percentages in some cases,
	the ''min-width/auto'', ''min-width/min-content'', ''min-width/max-content'', and ''min-width/fit-content'' values
	of 'min-width' and 'min-height'
	do not prevent the resolution of percentage sizes of the box’s contents.
	However, in order to prevent cyclic sizing in the general case,
	percentages do not otherwise resolve against <a>indefinite</a> sizes,
	and instead are treated as <css>auto</css>.

	Note: See definition of percentage
	<a href="https://www.w3.org/TR/CSS2/visudet.html#the-width-property"><css>width</css></a>
	and <a href="https://www.w3.org/TR/CSS2/visudet.html#the-height-property"><css>height</css></a>
	in [[CSS21]].

<h2 class=no-num id="changes">
Changes</h2>

	<p>
		Changes since the <a href="https://www.w3.org/TR/2012/WD-css3-sizing-20120927/">September 2012 Working Draft</a> include:

	<ul>
		<li>Changed <code>fill</code> keyword to <code>stretch-fit</code>.
		<li>Hooked up intrinsic sizes of replaced elements to the <a>default sizing algorithm</a> in [[!CSS3-IMAGES]].
		<li>Specified that <a>extrinsic sizing</a> treates ''margin/auto'' margins as zero.
		<li>Clarified definition of <a>available space</a>.
		<li>Specified that percentages resolved against an intrinsic size of the parent computes falls back to auto sizing.
		<li>Fixed bad wording wrt containing blocks in <a>stretch-fit inline size</a> definition,
		    and specified that it is calculated <em>after</em> margin collapsing.
		<li>Specified that an absolutely-positioned box's containing block is always considered definite.
		<li>Improved section on intrinsic sizing of multi-column elements.
		<li>Cleaned up some terminology (“min-size” to “min-content size”, “measure” to “inline-size, “extent” to “block-size”).
	</ul>

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

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

<h2 class=no-num id=priv-sec>
Privacy and Security Considerations</h2>

This specification introduces no new privacy or security considerations.