tschoessi tschoessi - 23 days ago 7
CSS Question

How to scale multiple <div> dynamically using min- and max-width?

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 this answer, but the divs don't resize. The desired behaviour is:


  • each of the div elements use max-width, when there is enough space

  • when there is not enough space to fit all divs with min-space inside, they should wrap

  • in between those two cases, they should resize equally



HTML:

<div class="pagination-number--demo-multiple-numbers">
<div class="pagination-number
pagination-number--smaller
pagination-number--narrow-to-wide
pagination-number--active
">
42
</div>
... (more elements)


CSS:

.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;
}


jsfiddle: https://jsfiddle.net/q5omjujd/

Answer

You could do this simply with Flexbox. Just add this to your CSS with the following two updated classes

CSS

.pagination-number--demo-multiple-numbers {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}

.pagination-number {
    font-size: 0.875rem;
    border: 0.0625rem solid #ffffff;
    border-radius: 4px;
    text-align: center;
    flex: 1;
    margin: 10px;
}

.pagination-number--demo-multiple-numbers {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
.pagination-number {
  font-size: 0.875rem;
  border: 0.0625rem solid #ffffff;
  border-radius: 4px;
  text-align: center;
  flex: 1;
  margin: 10px;
}
.pagination-number--smaller {
  height: 2.25rem;
  line-height: 2.125rem;
}
.pagination-number--narrow-to-wide {
  min-width: 2rem;
  max-width: 2.75rem;
  width: 100%;
}
.pagination-number--active {
  font-weight: 700;
  background-color: #eeeeee;
}
<div class="pagination-number--demo-multiple-numbers">
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
  <div class="pagination-number
        pagination-number--smaller
        pagination-number--narrow-to-wide
        pagination-number--active
        ">
    42
  </div>
</div>

Comments