[css-flexbox] Clarifications to visibility: collapse

Author: fantasai

css-flexbox/Overview.bs

@@ -704,7 +704,8 @@ Collapsed Items</h3>
 	but leaves behind a "strut" that keeps the flex line's cross-size stable.
 	Thus, if a flex container has only one flex line,
 	dynamically collapsing or uncollapsing items
-	is guaranteed to have no effect on the flex container's <a>cross size</a>
+	may change the <a>flex container</a>'s <a>main size</a>, but
+	is guaranteed to have no effect on its <a>cross size</a>
 	and won't cause the rest of the page's layout to "wobble".
 	Flex line wrapping <em>is</em> re-done after collapsing, however,
 	so the cross-size of a flex container with multiple lines might or might not change.
@@ -724,7 +725,7 @@ Collapsed Items</h3>
 		is in a collapsed section.
 
 		<figure>
-			<figcaption>Sample rendering for example code below</figcaption>
+			<figcaption>Sample live rendering for example code below</figcaption>
 			<div id="visibility-collapse-example">
 			<!-- No, don't look at this source code, look at the other source code. -->
 			  <nav>
@@ -750,7 +751,12 @@ Collapsed Items</h3>
 			    </ul>
 			  </nav>
 			  <article>
-			    Interesting Stuff to Read
+			    Hover over the menu to the left:
+			    each section expands to show its sub-items.
+			    In order to keep the sidebar width (and this main area width) stable,
+			    ''visibility: collapse'' is used instead of ''display: none''.
+			    This results in a sidebar that is always wide enough for the word “Architecture”,
+			    even though it is not always visible.
 			  </article>
 			</div>
 		</figure>

css-flexbox/Overview.html

@@ -1308,7 +1308,8 @@ <h3 class="heading settled" data-level="4.4" id="visibility-collapse"><span clas
 	but leaves behind a "strut" that keeps the flex line’s cross-size stable.
 	Thus, if a flex container has only one flex line,
 	dynamically collapsing or uncollapsing items
-	is guaranteed to have no effect on the flex container’s <a data-link-type="dfn" href="#cross-size">cross size</a>
+	may change the <a data-link-type="dfn" href="#flex-container">flex container</a>’s <a data-link-type="dfn" href="#main-size">main size</a>, but
+	is guaranteed to have no effect on its <a data-link-type="dfn" href="#cross-size">cross size</a>
 	and won’t cause the rest of the page’s layout to "wobble".
 	Flex line wrapping <em>is</em> re-done after collapsing, however,
 	so the cross-size of a flex container with multiple lines might or might not change.</p>
@@ -1322,7 +1323,7 @@ <h3 class="heading settled" data-level="4.4" id="visibility-collapse"><span clas
 	still operate on collapsed items.</p>
 
 
-   <div class="example" id="example-ab124732"><a class="self-link" href="#example-ab124732"></a>
+   <div class="example" id="example-20ddca23"><a class="self-link" href="#example-20ddca23"></a>
 		In the following example,
 		a sidebar is sized to fit its content.
 		<a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility: collapse</a> is used to dynamically hide parts of a navigation sidebar
@@ -1332,7 +1333,7 @@ <h3 class="heading settled" data-level="4.4" id="visibility-collapse"><span clas
 
     <figure>
 
-     <figcaption>Sample rendering for example code below</figcaption>
+     <figcaption>Sample live rendering for example code below</figcaption>
 
 
      <div id="visibility-collapse-example">
@@ -1388,7 +1389,12 @@ <h3 class="heading settled" data-level="4.4" id="visibility-collapse"><span clas
 
 
       <article>
-			    Interesting Stuff to Read
+			    Hover over the menu to the left:
+			    each section expands to show its sub-items.
+			    In order to keep the sidebar width (and this main area width) stable,
+			    <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visufx.html#propdef-visibility">visibility: collapse</a> is used instead of <a class="css" data-link-type="propdesc" href="http://dev.w3.org/csswg/css2/visuren.html#propdef-display">display: none</a>.
+			    This results in a sidebar that is always wide enough for the word “Architecture”,
+			    even though it is not always visible.
 			  </article>