How to calculate flex shrink when flex items have a different flex basis
<p>Let's say I have a simple flex container with 2 flex items where the flex items' sizes exceed the containers size - where flex-shrink will be used..like so:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 600px;
  outline: 5px solid;
  display: flex;
}
section {
  flex: 0 1 600px;
  background: salmon;
}
aside {
  flex: 0 1 200px;
  background: aqua;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;section&gt;
    &lt;h2&gt;Main content here&lt;/h2&gt;
  &lt;/section&gt;
  &lt;aside&gt;
    &lt;h2&gt;Some side content&lt;/h2&gt;
  &lt;/aside&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://codepen.io/danield770/pen/jqZweK" rel="noreferrer">Codepen demo</a></p>

<p>In the above example: The container is 600px, the section flex-item has flex basis of 600px and the aside has flex-basis of 200px - so the negative space is 200px.</p>

<p>So being that both flex items have the same flex-shrink factor of 1 - I expected that both flex items would shrink by 100px with the <code>section</code> getting a width of 600px - 100px = 500px and the <code>aside</code> getting 200px - 100px = 100px</p>

<p>But the result was actually that the <code>section</code> shrinks by 150px to 450px and the <code>aside</code> shrinks by 50px to 150px</p>

<p>So then I looked at <a href="https://www.w3.org/TR/css-flexbox-1/#flex-shrink-factor" rel="noreferrer">the spec</a> and I found this:</p>

<blockquote>
  <p>Note: The flex shrink factor is multiplied by the flex base size when
  distributing negative space. This distributes negative space in
  proportion to how much the item is able to shrink, so that e.g. a
  small item won’t shrink to zero before a larger item has been
  noticeably reduced.</p>
</blockquote>

<p>So now I understand that when calculating flex-shrink on a flex item not only is the flex shrink factor taken into account, but also the flex base size (here, defined by the flex-basis property)</p>

<p>The problem is that I can't seem to do the math to calculate flex-shrink.</p>

<p>So just to continue with the above example: say I change the shrink factor of the <code>section</code> to 2...</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 600px;
  outline: 5px solid;
  display: flex;
}
section {
  flex: 0 2 600px;
  background: salmon;
}
aside {
  flex: 0 1 200px;
  background: aqua;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;section&gt;
    &lt;h2&gt;Main content here&lt;/h2&gt;
  &lt;/section&gt;
  &lt;aside&gt;
    &lt;h2&gt;Some side content&lt;/h2&gt;
  &lt;/aside&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://codepen.io/danield770/pen/ONQjjw" rel="noreferrer">Codepen demo #2</a> </p>

<p>... the result is that <code>section</code> gets a width of 428px and <code>aside</code> gets a width of 121px</p>

<p>Can someone explain how to calculate this?</p>