title: Make flex-grow expand items based on their original size
body: <p>I have 3 buttons in a row which all vary in width. I want them to all gain width the same to fill the remaining width of the row, so the widest will still be wider than the others etc.</p>
  
  <p>You can see below that what I've tried to do with flex has resulted in all the buttons being the same width. I know <code>flex-grow</code> can be used to proportionally grow each item, but I can't work out how to get them all to grow in relation to their original size.</p>
  
  <p>You can see in the second row that the blue item is larger than the other two. I just want all three to expand from their current size equally to fill the row.</p>
  
  <p>Thanks</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>.row-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
  }
  
  .button {
    flex: 1;
    display: inline-block;
    padding: 10px;
    color: #fff;
    text-align: center;
  }
  
  .button--1 {
    background: red
  }
  
  .button--2 {
    background: green;
  }
  
  .button--3 {
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row-flex"&gt;
    &lt;a href="#" class="button button--1"&gt;Single&lt;/a&gt;
    &lt;a href="#" class="button button--2"&gt;Larger title&lt;/a&gt;
    &lt;a href="#" class="button button--3"&gt;Another really large title&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;br/&gt;
  
  &lt;div class="row"&gt;
    &lt;a href="#" class="button button--1"&gt;Single&lt;/a&gt;
    &lt;a href="#" class="button button--2"&gt;Larger title&lt;/a&gt;
    &lt;a href="#" class="button button--3"&gt;Another really large title&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>