title: CSS - Dynamic padding to expand divs to fill a dynamic width
body: <p>So I have a variable number of elements in a div that has a variable width. The elements inside have a fixed space between them, 5px, but each one needs to expand to fill the full width of the space of the outer div with padding, so the text can be centerized.</p>
  
  <p>Example:</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>.button-container{
    width: 100%;
    height: 50px;
  }
  .button-container .button{
    min-width: 75px;
    display: inline-block;
    text-align: center;
    border: 1px solid #FF0000;
  }
  .button-container .button + .button-container .button{
    margin-left: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='button-container'&gt;
    &lt;div class='button'&gt;B1&lt;/div&gt;
    &lt;div class='button'&gt;B2&lt;/div&gt;
    &lt;div class='button'&gt;B3&lt;/div&gt;
    &lt;div class='button'&gt;B4&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So how can I make the padding inside of the button class elements have a dynamic left and right padding to fill the space of the button-container class div?</p>
  
  <p>Ideally, the solution will be a CSS only solution, as I don't want to have jQuery to do the spacing.</p>