How to scale multiple <div> dynamically using min- and max-width?
<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>