Почему max-width не отменяет минимальную ширину?

Я пытаюсь создать отзывчивый макет, в котором две коробки сидят рядом друг с другом, если размер экрана позволяет это, и иметь их ниже друг друга, если это не так. Если ящики находятся ниже друг друга, я бы хотел, чтобы они были сосредоточены на родителях. Я установил jsfiddle, чтобы продемонстрировать проблему:

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

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

Попробуйте изменить размер области результатов до 350 пикселей. Элементы будут перекрываться с родителями.

Мой вопрос:

Почему не задана максимальная ширина, даже если она появляется после минимальной ширины?

Я мог бы, конечно, использовать медиа-запрос, но я хотел бы знать, почему это происходит.

Ответы

Ответ 1

Из-за стандартов CSS:

Следующий алгоритм описывает, как два свойства влияют на используемое значение свойства width:

  • Рассчитана ориентировочная используемая ширина (без "min-width" и 'max-width'), следуя правилам в разделе "Расчет ширины и поля" выше.
  • Если предварительная используемая ширина больше, чем 'max-width', правила выше применяются снова, но на этот раз, используя вычисленное значение "max-width" как вычисленное значение для "width".
  • Если результирующая ширина меньше "min-width" , правила выше снова применяются, но на этот раз используя значение "min-width" как вычисленное значение для 'width'.

Как таковая min-width всегда "выигрывает". В рамках конкретного правила CSS в любом случае нет приоритета, все значения применяются атомарно. Приоритет возникает только тогда, когда разные правила применяются к одному и тому же элементу, и даже тогда он основывается на специфичности перед рассмотрением порядка файлов.