CODEWITHSUNDEEP
css
Lg102
Lg102

Reputation: 4898

Why doesn't max-width override min-width?

I'm trying to create a responsive layout in which two boxes sit next to each other if the screen size allows it, and have them below each other if it doesn't. If the boxes are below each other, I'd like them to be centred to their parent. I've set up a jsfiddle to demonstrate the problem:

http://jsfiddle.net/leongersen/KsU23/

width: 50%;
min-width: 350px;
max-width: 100%;

Try resizing the 'result' pane to below 350px. The elements will overlap their parent.

My question:

Why isn't the specified max-width honoured, even though it comes after the min-width?

Upvotes: 61

Views: 20940

Answers (3)

digaus
digaus

Reputation: 111

Late aswell but I think the best solution would be the use of min()

width: 50%;
min-width: 350px;
max-width: 100%;

would become

width: 50%;
min-width: min(350px, 100%);

This way you are not depending on media querys which might even not work for your usecase because the width is based on the parent element

Upvotes: 11

Roland Gautier
Roland Gautier

Reputation: 345

I know, I'm late ... But one exact solution could be this:

p {
    display: inline-block;
    font-size: 15px;
    text-align: left;
    width: 50%;
    border: 1px solid blue;
    min-width: 350px;
}
@media (max-width: 700px) {
  p {
    width:100%;
    display:block;
  }
}

Upvotes: 4

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

Because of the CSS standards:

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

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

As such min-width always 'wins'. Within a specific CSS rule there's no precedence anyway, all values are applied atomically. Precedence only occurs when different rules all apply to the same element, and even then it is based on specificity first before file order is considered.

Upvotes: 83

Related Questions