[css-grid-1][css-flexbox-1] Add explanation of flex values <1. Fixes #2617.

Author: tabatkins

css-flexbox-1/Overview.bs

@@ -1525,6 +1525,45 @@ The 'flex' Shorthand</h3>
 			when positive free space is distributed.
 			When omitted, it is set to ''1''.
 
+			<details class=note>
+				<summary>Flex values between 0 and 1 have a somewhat special behavior:
+				when the sum of the flex values on the line is less than 1,
+				they will take up less than 100% of the free space.</summary>
+
+				An item’s 'flex-grow' value
+				is effectively a request for some proportion of the free space,
+				with ''1'' meaning “100% of the free space”;
+				then if the items on the line are requesting more than 100% in total,
+				the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
+				However, if the items request <em>less</em> than the full amount
+				(such as three items that are each ''flex-grow: .25'')
+				then they'll each get exactly what they request
+				(25% of the free space to each,
+				with the final 25% left unfilled).
+				See [[#resolve-flexible-lengths]] for the exact details
+				of how free space is distributed.
+
+				This pattern is required for continuous behavior as 'flex-grow' approaches zero
+				(which means the item wants <em>none</em> of the free space).
+				Without this, a ''flex-grow: 1'' item would take all of the free space;
+				but so would a ''flex-grow: 0.1'' item,
+				and a ''flex-grow: 0.01'' item,
+				etc.,
+				until finally the value is small enough to underflow to zero
+				and the item suddenly takes up none of the free space.
+				With this behavior,
+				the item instead gradually takes less of the free space
+				as 'flex-grow' shrinks below ''1'',
+				smoothly transitioning to taking none of the free space at zero.
+
+				Unless this “partial fill” behavior is <em>specifically</em> what's desired,
+				authors should stick to values &ge; 1;
+				for example, using ''1'' and ''2'' is usually better
+				than using ''.33'' and ''.67'',
+				as they're more likely to behave as intended
+				if items are added, removed, or line-wrapped.
+			</details>
+
 		<dt><dfn><<'flex-shrink'>></dfn>
 		<dd>
 			This <<number>> component sets 'flex-shrink' <a href="#flex-components">longhand</a>

css-grid-1/Overview.bs

@@ -1440,7 +1440,13 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 		<dd>
 			A non-negative dimension with the unit ''fr'' specifying the track's <dfn dfn noexport>flex factor</dfn>.
 			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
-			See <a href="#fr-unit">Flexible Lengths</a> for more details.
+			For example, given a track listing of ''1fr 2fr'',
+			the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
+			See [[#fr-unit]] for more details.
+
+			Note: If the sum of the <a>flex factors</a> is less than 1,
+			they'll take up only a corresponding fraction of the <a>leftover space</a>,
+			rather than expanding to fill the entire thing.
 
 			When appearing outside a ''minmax()'' notation,
 			implies an automatic minimum (i.e. ''minmax(auto, <<flex>>)'').
@@ -1719,25 +1725,53 @@ Flexible Lengths: the ''fr'' unit</h4>
 	which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
 	Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
-	similar to how <a>flex items</a> fill space in a <a>flex container</a>.
-
-	Note: <<flex>> values are not <<length>>s
-	(nor are they compatible with <<length>>s, like some <<percentage>> values),
-	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
+	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
 
 	The distribution of <a>leftover space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.
 	The total size of such rows or columns is subtracted from the available space, yielding the <a>leftover space</a>,
 	which is then divided among the flex-sized rows and columns in proportion to their <a>flex factor</a>.
 
-	Note: Flexible lengths in a <a>track list</a> work similarly to flexible lengths with a zero base size in [[CSS-FLEXBOX-1]].
-
 	Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
 	<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
 
-	Note: If the sum of the <a>flex factors</a> is less than 1,
-	they'll take up only a corresponding fraction of the <a>leftover space</a>,
-	rather than expanding to fill the entire thing.
-	This is similar to how Flexbox [[CSS-FLEXBOX-1]] acts when the sum of the 'flex' values is less than 1.
+	<details class=note>
+		<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
+		when the sum of the flex factors is less than 1,
+		they will take up less than 100% of the leftover space.</summary>
+
+		A track’s <<flex>> value
+		is effectively a request for some proportion of the leftover space,
+		with ''1fr'' meaning “100% of the leftover space”;
+		then if the tracks in that axis are requesting more than 100% in total,
+		the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
+		However, if the tracks request <em>less</em> than the full amount
+		(such as three tracks that are each ''.25fr'')
+		then they'll each get exactly what they request
+		(25% of the leftover space to each,
+		with the final 25% left unfilled).
+		See [[#algo-flex-tracks]] for the exact details
+		of how leftover space is distributed.
+
+		This pattern is required for continuous behavior as ''fr'' values approach zero
+		(which means the tracks wants <em>none</em> of the leftover space).
+		Without this, a ''1fr'' track would take all of the leftover space;
+		but so would a ''0.1fr'' track,
+		and a ''0.01fr'' track,
+		etc.,
+		until finally the value is small enough to underflow to zero
+		and the track suddenly takes up none of the leftover space.
+		With this behavior,
+		the track instead gradually takes less of the leftover space
+		as its flex factor shrinks below ''1fr'',
+		smoothly transitioning to taking none of the leftover space at zero.
+
+		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
+		authors should stick to values &ge; 1;
+		for example, using ''1fr'' and ''2fr'' is usually better
+		than using ''.33fr'' and ''.67fr'',
+		as they're more likely to behave as intended
+		if tracks are added or removed.
+	</details>
 
 	When the available space is infinite
 	(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
@@ -1749,6 +1783,10 @@ Flexible Lengths: the ''fr'' unit</h4>
 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
 
+	Note: <<flex>> values are not <<length>>s
+	(nor are they compatible with <<length>>s, like some <<percentage>> values),
+	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
+
 <!--
 ████████  ████████  ██████   ███████  ██       ██     ██ ████████ ████████
 ██     ██ ██       ██    ██ ██     ██ ██       ██     ██ ██       ██     ██