[css-flexbox] Add missing notes from min-size auto stuff.

Author: tabatkins

css-flexbox/Overview.bs

@@ -815,6 +815,27 @@ Implied Minimum Size of Flex Items</h3>
 			this keyword computes to ''0''
 			(unless otherwise defined by a future specification).
 	</dl>
+
+	<div class="note" id="min-size-opt">
+		<p>
+			Note that while a content-based minimum size is often appropriate,
+			and helps prevent content from overlapping or spilling outside its container,
+			in some cases it is not:
+
+		<p>
+			In particular, if flex sizing is being used for a major content area of a document,
+			it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
+			A content-based minimum width could result in a large table or large image
+			stretching the size of the entire content area into an overflow zone,
+			and thereby making lines of text gratuitously long and hard to read.
+
+		<p>
+			Note also, when content-based sizing is used on an item with large amounts of content,
+			the layout engine must traverse all of this content before finding its minimum size,
+			whereas if the author sets an explicit minimum, this is not necessary.
+			(For items with small amounts of content, however,
+			this traversal is trivial and therefore not a performance concern.)
+	</div>
 </div>
 
 
@@ -1394,15 +1415,11 @@ Common Values of 'flex'</h3>
 			their sizes will be proportional to the specified flex factor.
 	</dl>
 
-	<div class='note'>
-		Note that, because flex items typically can shrink,
-		it is often recommended that a minimum main size be set
-		(with 'min-width' or 'min-height')
-		to prevent them from shrinking too small to fit their contents.
-		This problem is especially common with horizontal navigation or toolbars.
-
-		<pre>nav li { flex: 1; min-width: min-content; /* Don't overflow */}</pre>
-	</div>
+	<p>
+		By default, flex items won't shrink below their minimum content size
+		(the length of the longest word or fixed-size element).
+		To change this, set the 'min-width' or 'min-height' property.
+		(See <a href="#min-size-auto">Implied Minimum Size of Flex Items</a>.)
 
 <h3 id='flex-components'>
 Components of Flexibility</h3>

css-flexbox/Overview.html

@@ -928,7 +928,7 @@ <h3 class="heading settled heading" data-level=4.4 id=visibility-collapse><span
 <h3 class="heading settled heading" data-level=4.5 id=min-size-auto><span class=secno>4.5 </span><span class=content>
 Implied Minimum Size of Flex Items</span><a class=self-link href=#min-size-auto></a></h3>
 
-<div class=issue id=issue-7f3b7c8c><a class=self-link href=#issue-7f3b7c8c></a>
+<div class=issue id=issue-840085c1><a class=self-link href=#issue-840085c1></a>
 	This section is under discussion. See <a href=issues-cr-2012#issue-19>Issue </a>.
 
 <p>	To provide a more reasonable default minimum size for <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>,
@@ -951,6 +951,27 @@ <h3 class="heading settled heading" data-level=4.5 id=min-size-auto><span class=
 			this keyword computes to <span class=css data-link-type=maybe title=0>0</span>
 			(unless otherwise defined by a future specification).
 	</dl>
+
+	<div class=note id=min-size-opt><a class=self-link href=#min-size-opt></a>
+		<p>
+			Note that while a content-based minimum size is often appropriate,
+			and helps prevent content from overlapping or spilling outside its container,
+			in some cases it is not:
+
+		<p>
+			In particular, if flex sizing is being used for a major content area of a document,
+			it is better to set an explicit font-relative minimum width such as <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width: 12em</a>.
+			A content-based minimum width could result in a large table or large image
+			stretching the size of the entire content area into an overflow zone,
+			and thereby making lines of text gratuitously long and hard to read.
+
+		<p>
+			Note also, when content-based sizing is used on an item with large amounts of content,
+			the layout engine must traverse all of this content before finding its minimum size,
+			whereas if the author sets an explicit minimum, this is not necessary.
+			(For items with small amounts of content, however,
+			this traversal is trivial and therefore not a performance concern.)
+	</div>
 </div>
 
 
@@ -1475,14 +1496,11 @@ <h3 class="heading settled heading" data-level=7.2 id=flex-common><span class=se
 			their sizes will be proportional to the specified flex factor.
 	</dl>
 
-	<div class=note>
-		Note that, because flex items typically can shrink,
-		it is often recommended that a minimum main size be set
-		(with <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width</a> or <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height title=min-height>min-height</a>)
-		to prevent them from shrinking too small to fit their contents.
-		This problem is especially common with horizontal navigation or toolbars.
-
-<pre>nav li { flex: 1; min-width: min-content; /* Don’t overflow */}</pre>	</div>
+	<p>
+		By default, flex items won’t shrink below their minimum content size
+		(the length of the longest word or fixed-size element).
+		To change this, set the <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width</a> or <a class=property data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height title=min-height>min-height</a> property.
+		(See <a href=#min-size-auto>Implied Minimum Size of Flex Items</a>.)
 
 <h3 class="heading settled heading" data-level=7.3 id=flex-components><span class=secno>7.3 </span><span class=content>
 Components of Flexibility</span><a class=self-link href=#flex-components></a></h3>
@@ -3430,7 +3448,28 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 			this keyword computes to <span class=css data-link-type=maybe title=0>0</span>
 			(unless otherwise defined by a future specification).
 	</dl>
-<a href=#issue-7f3b7c8c> ↵ </a></div>
+
+	<div class=note>
+		<p>
+			Note that while a content-based minimum size is often appropriate,
+			and helps prevent content from overlapping or spilling outside its container,
+			in some cases it is not:
+
+		<p>
+			In particular, if flex sizing is being used for a major content area of a document,
+			it is better to set an explicit font-relative minimum width such as <a class=css data-link-type=propdesc href=http://www.w3.org/TR/CSS21/visudet.html#propdef-min-width title=min-width>min-width: 12em</a>.
+			A content-based minimum width could result in a large table or large image
+			stretching the size of the entire content area into an overflow zone,
+			and thereby making lines of text gratuitously long and hard to read.
+
+		<p>
+			Note also, when content-based sizing is used on an item with large amounts of content,
+			the layout engine must traverse all of this content before finding its minimum size,
+			whereas if the author sets an explicit minimum, this is not necessary.
+			(For items with small amounts of content, however,
+			this traversal is trivial and therefore not a performance concern.)
+	</div>
+<a href=#issue-840085c1> ↵ </a></div>
 
 
 <div class=issue>