Generated. Do not edit!

Author: bert-github

css3-box/Overview.html

@@ -2323,13 +2323,39 @@ <h3 id=the-margin-properties><span class=secno>9.1. </span>The margin
   <div class=issue>
    <p>Add a stretch value to allow vertical distribution of blocks in a
     fixed-height containing block? css3-flexbox currently (May 2012) proposes
-    to use ‘<code class=css>auto</code>’, but in normal flow we need
-    something else, because ‘<code class=css>auto</code>’ already means
-    ‘<code class=css>0</code>’ there.
+    to use ‘<code class=css>auto</code>’, but in normal flow we probably
+    need something else, because ‘<code class=css>auto</code>’ already
+    means ‘<code class=css>0</code>’ there.
 
-   <pre class=prod><var>&lt;stretch&gt;</var> = fill( [ <a
+   <pre class=prod><dfn id=ltstretchgt>&lt;stretch&gt;</dfn> = fill( [ <a
     href="#ltlengthgt"><var>&lt;length&gt;</var></a>  | <a
     href="#ltpercentagegt"><var>&lt;percentage&gt;</var></a> ] )</pre>
+
+   <p>This sets an elastic margin with a minimum thickness. Maybe it is
+    enough without the minimum thickness, i.e.:
+
+   <pre class=prod><a
+    href="#ltstretchgt"><var>&lt;stretch&gt;</var></a> = fill</pre>
+
+   <p>Collapsing margins of which at least one has a <a
+    href="#ltstretchgt"><var>&lt;stretch&gt;</var></a> value would yield
+    ‘<code class=css>fill(<var>M</var> - <var>N</var>), or maybe just
+    </code>’fill'.
+
+   <p>To find the size of such a collapsed margin, find the nearest enclosing
+    containing block in the same flow that has a fixed height, call that
+    height <var>H1</var>. Compute the height of the content in that
+    containing block (while treating ‘<code
+    class=css>fill(<var>P</var>)</code>’ as if it was simply <var>P</var>)
+    and call that height <var>H2</var>. Count the number <var>N</var> of
+    stretchable margins. If <var>H2</var> &lt; <var>H1</var>, then increase
+    all the stretchable margins by (<var>H1</var> -
+    <var>H2</var>)/<var>N</var>. If there is no such enclosing block,
+    ‘<code class=css>fill(<var>P</var>)</code>’ simply means
+    <var>P</var>.
+
+   <p>In a multi-column element, each column box is a separate containing
+    block for the purpose of stretching the margins.
   </div>
 
   <p>These properties set the thickness of the <a
@@ -7829,6 +7855,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>static position, <a href="#static-position"
     title="static position"><strong>14.6.</strong></a>
 
+   <li>&lt;stretch&gt;, <a href="#ltstretchgt"
+    title="&lt;stretch&gt;"><strong>9.1.</strong></a>
+
    <li>SVG, <a href="#svg" title=SVG>5.</a>, <a href="#svg0"
     title=SVG>5.</a>, <a href="#svg1" title=SVG>7.2.</a>, <a href="#svg2"
     title=SVG>22.5.</a>