[css-flexbox] Add an example to flex layout section, and some commented out text for possible fixes.

--HG--
extra : rebase_source : fad4a0aa049c1c0f9100ee9aff55e875676ba271

Author: tabatkins

css-flexbox/Overview.html

@@ -11,7 +11,7 @@
 
   <meta content="CSS Flexible Box Layout Module" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-07-19 name=dcterms.date>
+  <meta content=2013-07-23 name=dcterms.date>
   <meta content="Tab Atkins Jr." name=dcterms.creator>
   <meta content="Elika J. Etemad" name=dcterms.creator>
   <meta content="Rossen Atanassov" name=dcterms.creator>
@@ -224,11 +224,11 @@
    <h1 class=p-name id=head-box-flexible>CSS Flexible Box Layout Module</h1>
 
    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, <time
-    class=dt-updated datetime=20130719>19 July 2013</time></h2>
+    class=dt-updated datetime=20130723>23 July 2013</time></h2>
 
    <dl>
     <dt>This version:
-     <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130719/</a>-->
+     <!--<dd><a class="u-url" href="http://dev.w3.org/csswg/css3-flexbox/">http://www.w3.org/TR/2013/CR-css3-flexbox-20130723/</a>-->
 
     <dd><a class=u-url
      href="http://dev.w3.org/csswg/css3-flexbox/">http://dev.w3.org/csswg/css3-flexbox/</a>
@@ -3091,11 +3091,33 @@ <h3 id=line-sizing><span class=secno>9.2. </span> Line Length Determination</h3>
   <ol class=continue>
    <li id=algo-available> <strong>Determine the available main and cross
     space for the flex items.</strong> For each dimension, if that dimension
-    of the flex container is a <a href="#definite-size"><i>definite
-    size</i></a>, use that; otherwise, subtract the flex container's margin,
-    border, and padding from the space available to the flex container in
-    that dimension and use that value. <span class=note>This might result in
-    an infinite value.</span>
+    of the <a href="#flex-container"><i>flex container</i></a>’s content
+    box is a <a href="#definite-size"><i>definite size</i></a>, use that;
+    otherwise, subtract the <a href="#flex-container"><i>flex
+    container</i></a>’s margin, border, and padding from the space
+    available to the flex container in that dimension and use that value.
+    <span class=note>This might result in an infinite value.</span>
+    <!-- Maybe???
+			For this purpose,
+			the block axis of a block container(?)
+			always provides infinite available space.
+			-->
+
+    <div class=example>
+     <p>For example, the <i>available space</i> to a flex item in a <a
+      href="http://www.w3.org/TR/CSS21/visuren.html#floats">floated</a>
+      ‘<code class=css>auto</code>’-sized <a
+      href="#flex-container"><i>flex container</i></a> is:
+
+     <ul>
+      <li>the width of the <a href="#flex-container"><i>flex
+       container</i></a>’s containing block minus the <a
+       href="#flex-container"><i>flex container</i></a>’s margin, border,
+       and padding in the horizontal dimension
+
+      <li>infinite in the vertical dimension
+     </ul>
+    </div>
 
    <li id=algo-main-item> <strong>Determine the <dfn id=flex-base-size>flex
     base size</dfn> and <dfn id=hypothetical-main-size>hypothetical main

css-flexbox/Overview.src.html

@@ -2353,11 +2353,25 @@ <h3 id='line-sizing'>
 		<li id='algo-available'>
 			<strong>Determine the available main and cross space for the flex items.</strong>
 			For each dimension,
-			if that dimension of the flex container is a <i>definite size</i>, use that;
-			otherwise, subtract the flex container's margin, border, and padding
+			if that dimension of the <i>flex container</i>’s content box is a <i>definite size</i>, use that;
+			otherwise, subtract the <i>flex container</i>’s margin, border, and padding
 			from the space available to the flex container in that dimension
 			and use that value.
 			<span class='note'>This might result in an infinite value.</span>
+			<!-- Maybe???
+			For this purpose,
+			the block axis of a block container(?)
+			always provides infinite available space.
+			-->
+
+			<div class='example'>
+				<p>For example, the <i>available space</i> to a flex item in a
+					<a href="http://www.w3.org/TR/CSS21/visuren.html#floats">floated</a> ''auto''-sized <i>flex container</i> is:
+				<ul>
+					<li>the width of the <i>flex container</i>’s containing block minus the <i>flex container</i>’s margin, border, and padding in the horizontal dimension
+					<li>infinite in the vertical dimension
+				</ul>
+			</div>
 
 		<li id='algo-main-item'>
 			<strong>Determine the <dfn>flex base size</dfn> and <dfn>hypothetical main size</dfn> of each item:</strong>