[css-flexbox] Add link to 2.1 section on block-in-inline splits. (Also, that section needs an illustration.)

Author: fantasai

css-flexbox/Overview.bs

@@ -567,7 +567,7 @@ Flex Items</h2>
 		    &lt;!-- flex item: inline child -->
 		    &lt;span>
 		        item 4
-		        &lt;!-- flex items do not split around blocks -->
+		        &lt;!-- flex items do not <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->
 		        &lt;q style="display: block" id=not-an-item>item 4&lt;/q>
 		        item 4
 		    &lt;/span>

css-flexbox/Overview.html

@@ -747,28 +747,29 @@ <h2 class="heading settled" data-level="4" id="flex-items"><span class="secno">4
 	and each contiguous run of text that is directly contained inside a <a data-link-type="dfn" href="#flex-container">flex container</a> is wrapped in an anonymous <a data-link-type="dfn" href="#flex-item">flex item</a>.
 	However, an anonymous flex item that contains only <a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white space</a> (i.e. characters that can be affected by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-white-space">white-space</a> property)
 	is not rendered, as if it were <span class="css">display:none</span>.</p>
-   <div class="example" id="example-e9ad07af">
-    <a class="self-link" href="#example-e9ad07af"></a>
+   <div class="example" id="example-25a54dcc">
+    <a class="self-link" href="#example-25a54dcc"></a>
     <p>Examples of flex items: </p>
-<pre class="lang-markup highlight"><span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"display:flex"</span><span class="nt">></span>
+<pre class="lang-markup">&lt;div style="display:flex">
 
-    <span class="c">&lt;!-- flex item: block child --></span>
-    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"item1"</span><span class="nt">></span>block<span class="nt">&lt;/div></span>
+    &lt;!-- flex item: block child -->
+    &lt;div id="item1">block&lt;/div>
 
-    <span class="c">&lt;!-- flex item: floated element; floating is ignored --></span>
-    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"item2"</span> <span class="na">style=</span><span class="s">"float: left;"</span><span class="nt">></span>float<span class="nt">&lt;/div></span>
+    &lt;!-- flex item: floated element; floating is ignored -->
+    &lt;div id="item2" style="float: left;">float&lt;/div>
 
-    <span class="c">&lt;!-- flex item: anonymous block box around inline content --></span>
+    &lt;!-- flex item: anonymous block box around inline content -->
     anonymous item 3
 
-    <span class="c">&lt;!-- flex item: inline child --></span>
-    <span class="nt">&lt;span></span>
+    &lt;!-- flex item: inline child -->
+    &lt;span>
         item 4
-        <span class="c">&lt;!-- flex items do not split around blocks --></span>
-        <span class="nt">&lt;q</span> <span class="na">style=</span><span class="s">"display: block"</span> <span class="na">id=</span><span class="s">not-an-item</span><span class="nt">></span>item 4<span class="nt">&lt;/q></span>
+        &lt;!-- flex items do not <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->
+        &lt;q style="display: block" id=not-an-item>item 4&lt;/q>
         item 4
-    <span class="nt">&lt;/span></span>
-<span class="nt">&lt;/div></span></pre>
+    &lt;/span>
+&lt;/div>
+</pre>
    </div>
    <p>A <a data-link-type="dfn" href="#flex-item">flex item</a> establishes a new formatting context for its contents.
 	The type of this formatting context is determined by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display">display</a> value, as usual.