[css-sizing-4] Add definition of stretch-fit sizing.

Author: fantasai

css-sizing-4/Overview.bs

@@ -284,7 +284,7 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
 	layout rules specific to [=replaced elements=] generally
 	do not apply to [=non-replaced=] boxes with a [=preferred aspect ratio=].
 	For example, a [=non-replaced=] [=absolutely-positioned=] box
-	treats ''justify-self: normal'' as ''stretch'', not as ''start''
+	treats ''justify-self: normal'' as ''justify-self/stretch'', not as ''justify-self/start''
 	([[CSS-ALIGN-3#justify-abspos]]).
 
 	ISSUE: CSS2.1 does not cleanly differentiate between
@@ -573,12 +573,70 @@ Intrinsic Size Contributions</h2>
 <h2 id='extrinsic'>
 Extrinsic Size Determination</h2>
 
-	…
+	ISSUE: [[css-sizing-3#extrinsic]]
 
 <h3 id="stretch-fit-sizing">
-Stretch-fit Sizing</h3>
+Stretch-fit Sizing: filling the containing block</h3>
+
+	Stretch-fit sizing tries to set the box’s used size
+	to the length necessary
+	to make its outer size as close to filling the [=containing block=] as possible
+	while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
+
+	Formally, its behavior is the same as specifying an [=automatic size=]
+	together with a [=self-alignment property=] value of ''width/stretch''
+	(in the relevant axis),
+	except that the resulting box,
+	which can end up not exactly fitting its [=alignment container=],
+	can be subsequently aligned by its actual [=self-alignment property=] value.
+
+	Additionally,
+	in [=formatting contexts=] and axes in which the relevant [=self-alignment property=] does not apply
+	(such as the block axis in Block Layout, or the main axis in Flex Layout),
+	[=stretch-fit sizing=] still has the effect
+	of causing the box to attempt to fill its containing block,
+	invoking the percentage size calculations but applying that size to its margin box
+	instead of the box indicated by 'box-sizing'.
+	For this purpose, ''margin/auto'' margins are treated as zero,
+	and furthermore, for [=block-level boxes=] in particular,
+	if its block-start/block-end [=margin=]
+	would be adjoining to its parent's block-start/block-end [=margin=]
+	if its parent’s [=sizing properties=] all had their [=initial values=],
+	then its block-start/block-end [=margin=] is treated as zero.
 
-	…
+	<div class="example">
+		For example, given the following HTML representing two [=block boxes=]:
+		<pre class=html>
+		  &lt;div class="outer">
+		    &lt;div class="inner">&lt;/div>
+		  &lt;/div>
+		</pre>
+
+		In the following case,
+		the [=outer height=] of the inner box
+		will exactly match the height of the outer box (200px),
+		but its [=inner height=] will be 20px less, to account for its margins.
+
+		<pre>
+		  .outer { height: 200px; border: solid; }
+		  .inner { height: stretch; margin: 10px; }
+		</pre>
+
+		In the following case,
+		the height of the inner box
+		will exactly match the height of the outer box (200px).
+		The top margins will collapse,
+		but the bottom margins do not collapse
+		(because the bottom margin of a box is not adjoining
+		to the bottom margin of a parent with a non-''height/auto'' height,
+		see [[CSS2/box#collapsing-margins]]),
+		and therefore the inner box’s bottom margin will be truncated.
+
+		<pre>
+		  .outer { height: 200px; margin: 0; }
+		  .inner { height: stretch; margin: 10px; }
+		</pre>
+	</div>
 
 <h3 id="contain-fit-sizing">
 Contain-fit Sizing: stretching while maintaining an aspect ratio</h3>