Min/Max Width/Height with Multiple Values

Specifying multiple max-width values for an element

You could just use:

#element {
    width: 90%;
    max-width: 800px;
}

This way #element's width will always be exactly 90% of the parent's if that's lower than 800px or 800px otherwise.

Alternatively, depending on what you are trying to do, you should use media queries or a wrapping element.

Why unsetting max and min width/height css properties require different values?

The none value only applies to max-height / max-width. This is because there is no limit on the height / width of the box. Hence, the default value for these properties is none.

The none value is not permitted on min-height / min-width because boxes cannot have negative height / width. Hence, the default value for these properties is 0.

Spec references:

• 10.4 Minimum and maximum widths: min-width and max-width
• 10.7 Minimum and maximum heights: min-height and max-height

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

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>

In CSS, does min-height always have priority over max-height in all browsers?

Yes min-height is always the winner according to the specification:

The following algorithm describes how the two properties influence the used value of the 'height' property:

1. The tentative used height is calculated (without 'min-height' and 'max-height') following the rules under "Calculating heights and margins" above.
2. If this tentative height is greater than 'max-height', the rules above are applied again, but this time using the value of 'max-height' as the computed value for 'height'.
3. If the resulting height is smaller than 'min-height', the rules above are applied again, but this time using the value of 'min-height' as the computed value for 'height'.

As you can see, the min-height is the last one to be proceeded. We first calculate the height without min/max. Then we introduce max-height that may change the computed value of height and at the end we do the same with min-height.

Worth to note that the same happen with min-width ^ref

---

As far as I know, nothing can override min-height/width, even the shrink feature of flexbox cannot make an element shrink past its min-height/width. Related: Why is a flex item limited to parent size?

Also related: min-width and max-width with the same value?

---

Related Topics