Apply Alex's suggestion about negative flexibility being scaled by flex-basis, so things will shrink more proportionally.

Author: tabatkins

css3-flexbox/Overview.html

@@ -2531,30 +2531,30 @@ <h3 id=resolve-flexible-lengths><span class=secno>9.7. </span> Resolving
    <li> <strong>Distribute free space proportional to flexibility.</strong>
     If the sign of the free space matches the sign of the flexibility,
     distribute the free space to each flexible item's main size in proportion
-    to the item's flexibility.
-    <div class=issue>
-     <p>Growing and shrinking from flex basis should use different formulas
-      for space distribution.</p>
-
-     <p>Grow proportional to <em> flexibility</em>. Items with equal
-      flexibility grow by same absolute amount.</p>
-
-     <pre>
-free-space = available-space - sum(flex-basis)
-main-size = flex-basis + free-space * positive-flex / sum(positive-flex)</pre>
-
-     <p>Shrink proportional to its <em> flexibility and flex-basis.</em>
-      Items with same flexibility maintain same relative size while
-      shrinking.</p>
-
-     <pre>
-space-shortage = sum(flex-basis) - available-space
-shrink-factor = space-shortage / sum(flex-basis * negative-flex))
-main-size = flex-basis * (1 - shrink-factor * negative-flex))</pre>
-
-     <p> See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16856">
-      Bug 16856</a></p>
-    </div>
+    to the item's flexibility:
+    <dl>
+     <dt>If the flexibility is positive
+
+     <dd> Find the ratio of the item's <a
+      href="#positive-flexibility"><i>positive flex ratio</i></a> to the sum
+      of the <a href="#positive-flexibility"><i>positive flex ratios</i></a>
+      of all items on the line. Set the item's main size to its <a
+      href="#flex-basis"><i>flex basis</i></a> plus a fraction of the free
+      space proportional to the ratio.
+
+     <dt>If the flexibility is negative
+
+     <dd> For every item on the line, multiple its <a
+      href="#negative-flex-ratio"><i>negative flex ratio</i></a> by its <a
+      href="#flex-basis"><i>flex basis</i></a>, and note this as its <dfn
+      id=scaled-negative-flex-ratio>scaled negative flex ratio</dfn>. Find
+      the ratio of the item's <a href="#scaled-negative-flex-ratio"><i>scaled
+      negative flex ratio</i></a> to the sum of the <a
+      href="#scaled-negative-flex-ratio"><i>scaled negative flex
+      ratios</i></a> of all items on the line. Set the item's main size to
+      its <a href="#flex-basis"><i>flex basis</i></a> minus a fraction of the
+      free space proportional to the ratio.
+    </dl>
 
    <li> <strong>Fix min/max violations.</strong> Clamp each item's main size
     by its min and max main size properties. If the item's main size was made
@@ -3444,6 +3444,9 @@ <h2 class=no-num id=index>Index</h2>
     class=css>row-reverse</code></a>’, <a href="#flex-flow-row-reverse"
     title="''row-reverse''"><strong>6.1.</strong></a>
 
+   <li>scaled negative flex ratio, <a href="#scaled-negative-flex-ratio"
+    title="scaled negative flex ratio"><strong>9.7.</strong></a>
+
    <li>single-line, <a href="#single-line"
     title=single-line><strong>5.</strong></a>
 

css3-flexbox/Overview.src.html

@@ -1813,30 +1813,31 @@ <h3 id='resolve-flexible-lengths'>
 			<strong>Distribute free space proportional to flexibility.</strong>
 			If the sign of the free space matches the sign of the flexibility,
 			distribute the free space to each flexible item's main size 
-			in proportion to the item's flexibility.
-
-			<div class="issue">
-				<p>Growing and shrinking from flex basis should use different 
-				formulas for space distribution.</p>
-
-				<p>Grow proportional to <em>
-				flexibility</em>. Items with equal flexibility grow by same 
-				absolute amount.</p>
-				<pre>
-free-space = available-space - sum(flex-basis)
-main-size = flex-basis + free-space * positive-flex / sum(positive-flex)</pre>
-
-				<p>Shrink proportional to its <em>
-				flexibility and flex-basis.</em> Items with same flexibility maintain 
-				same relative size while shrinking.</p>
-				<pre>
-space-shortage = sum(flex-basis) - available-space
-shrink-factor = space-shortage / sum(flex-basis * negative-flex))
-main-size = flex-basis * (1 - shrink-factor * negative-flex))</pre>
-				<p>
-				See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16856">
-				Bug 16856</a> </p>
-			</div>
+			in proportion to the item's flexibility:
+
+			<dl>
+				<dt>If the flexibility is positive</dt>
+				<dd>
+					Find the ratio of the item's <i>positive flex ratio</i>
+					to the sum of the <i>positive flex ratios</i> of all items on the line.
+					Set the item's main size
+					to its <i>flex basis</i>
+					plus a fraction of the free space
+					proportional to the ratio.
+
+				<dt>If the flexibility is negative</dt>
+				<dd>
+					For every item on the line,
+					multiple its <i>negative flex ratio</i>
+					by its <i>flex basis</i>,
+					and note this as its <dfn>scaled negative flex ratio</dfn>.
+					Find the ratio of the item's <i>scaled negative flex ratio</i>
+					to the sum of the <i>scaled negative flex ratios</i> of all items on the line.
+					Set the item's main size
+					to its <i>flex basis</i>
+					minus a fraction of the free space
+					proportional to the ratio.
+			</dl>
 
 		<li>
 			<strong>Fix min/max violations.</strong>