[css-sizing-3] Move section, add subheading, improve cross-references.

Author: fantasai

css-sizing-3/Overview.bs

@@ -778,6 +778,51 @@ New Column Sizing Values: the ''column-width/min-content'', ''column-width/max-c
 	all of its contents are taken under consideration
 	and the calculated width is shared by all the 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="percentage-sizing">
+	Percentage Sizing</h3>
+
+	Percentages specify sizing of a box with respect to the box’s <a>containing block</a>.
+
+	<div class="example">
+		For example, in the following markup:
+
+		<xmp class='lang-html'>
+			<article style="height: 60em">
+				<figure style="height: 50%;">
+					<img style="height: 50%;">
+				</figure>
+			</article>
+		</xmp>
+
+		* the <code>&lt;figure></code> would be ''30em'' tall
+			= 50% of the [=definite=] ''60em'' height of the <code>&lt;article></code>
+		* the <code>&lt;img></code> would be ''15em'' tall
+			= 50% of the <code>&lt;figure></code>’s height
+			(which is itself [=definite=] because it's a percentage resolved against a [=definite=] length)
+	</div>
+
+	See [[#cyclic-percentage-contribution]]
+	for details on how to resolve percentages
+	when the size of the [=containing block=] depends
+	on the size of its content.
 
 <!--
 ████ ██    ██ ████████ ████████  ████ ██    ██  ██████  ████  ██████
@@ -945,46 +990,8 @@ Intrinsic Contributions</h3>
 	and/or existing implementations
 	for further details.
 
-<!--
-████████ ██     ██ ████████ ████████  ████ ██    ██  ██████  ████  ██████
-██        ██   ██     ██    ██     ██  ██  ███   ██ ██    ██  ██  ██    ██
-██         ██ ██      ██    ██     ██  ██  ████  ██ ██        ██  ██
-██████      ███       ██    ████████   ██  ██ ██ ██  ██████   ██  ██
-██         ██ ██      ██    ██   ██    ██  ██  ████       ██  ██  ██
-██        ██   ██     ██    ██    ██   ██  ██   ███ ██    ██  ██  ██    ██
-████████ ██     ██    ██    ██     ██ ████ ██    ██  ██████  ████  ██████
--->
-
-<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="percentage-sizing">
-	Percentage Sizing</h3>
-
-	Percentages specify sizing of a box with respect to the box’s <a>containing block</a>.
-
-	<div class="example">
-		For example, in the following markup:
-
-		<xmp class='lang-html'>
-			<article style="height: 60em">
-				<figure style="height: 50%;">
-					<img style="height: 50%;">
-				</figure>
-			</article>
-		</xmp>
-
-		* the <code>&lt;figure></code> would be ''30em'' tall
-			= 50% of the [=definite=] ''60em'' height of the <code>&lt;article></code>
-		* the <code>&lt;img></code> would be ''15em'' tall
-			= 50% of the <code>&lt;figure></code>’s height
-			(which is itself [=definite=] because it's a percentage resolved against a [=definite=] length)
-	</div>
+<h4 id="cyclic-percentage-contribution">
+Intrinsic Contributions of Percentage-Sized Boxes</h4>
 
 	Sometimes the size of a percentage-sized box’s <a>containing block</a>
 	depends on the intrinsic size contribution of the box itself,