title: How to stretch the last CSS flex item all the way to the right edge of the view port?
body: <p>I'm trying to clone the &quot;editor's picks&quot; of <a href="https://news.harvard.edu/gazette/story/2022/06/see-a-psychologist-for-back-pain-research-says-yes/" rel="nofollow noreferrer">this page</a></p>
  <p>This is the very selector I want to clone: <code>document.querySelector('.article-collection-teases__teases--layout-3-asymmetric .tz-article-collection--wide')</code></p>
  <p>It uses this <code>calc(((100vw - 1224px)/ 2) + 601px);</code> as it's width.</p>
  <p><strong>I'm assuming the <code>601px</code> is not hard-coded</strong></p>
  <p>I'm trying to replicate it <a href="https://jsbin.com/sajexokeda/2/edit?css,output" rel="nofollow noreferrer">here</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.editors-picks{
    width: 900px;
    background:blue;
    margin: auto
  }
  .articles{
    display: flex;
  }
  .articles  div{
    min-width: 23.52941%;
    margin-right: 1.96078%;
    min-height: 40px;
    background:red; 
  }
  
  .articles .big{
    width: calc(((100vw - 900px)/ 2) + 401px);
    background: green;
    flex-shrink: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="editors-picks"&gt;
  &lt;h3&gt;Editor's Picks&lt;/h3&gt;
  &lt;div class="articles"&gt;
    &lt;div&gt;d&lt;/div&gt;
    &lt;div&gt;d&lt;/div&gt;
    &lt;div class="big"&gt;ddd&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm sure if I start adding a few more pixels to <code>401px</code> I can get the effect <strong>but is there a logic behind the calculation?</strong> Why does <code>601px</code> give them the effect it does</p>