title: How to scale multiple <div> dynamically using min- and max-width?
body: <p>I have a bunch of divs with a specific height. I want the width to scale from 2rem to 2.75 rem, dependent on the available space. It's probably a noobie question but I just can't figure out how to do this - I already tried using <a href="https://stackoverflow.com/a/14939612/2725515">this answer</a>, but the divs don't resize. The desired behaviour is:</p>
  
  <ul>
  <li>each of the div elements use max-width, when there is enough space</li>
  <li>when there is not enough space to fit all divs with min-space inside, they should wrap</li>
  <li>in between those two cases, they should resize equally</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="pagination-number--demo-multiple-numbers"&gt;
      &lt;div class="pagination-number
          pagination-number--smaller
          pagination-number--narrow-to-wide
          pagination-number--active
          "&gt;
          42
      &lt;/div&gt;
      ... (more elements)
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.pagination-number--demo-multiple-numbers {
      width: 100%;
      margin: 0 auto;
  }
  .pagination-number {
    font-size: 0.875rem;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 0.0625rem solid #ffffff;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  }
  .pagination-number--smaller {
    height: 2.25rem;
    line-height: 2.125rem;
  }
  .pagination-number--narrow-to-wide {
    min-width: 2rem;
    max-width: 2.75rem;
    width: 100%;
    margin: 0 auto;
  }
  .pagination-number--active {
    font-weight: 700;
    background-color: #eeeeee;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/q5omjujd/" rel="nofollow noreferrer">https://jsfiddle.net/q5omjujd/</a></p>