Повість про властивості width і max-width

19

Від автора: ви хотіли б обмежити ширину модального вікна? Ну, щоб спливаюче вікно схоже на модальне на великих екранах. Скажімо, вам потрібно 600px. Потрібно зробити так, щоб це вікно не вилізло за межі його батьківського елементу. Приміром, щоб не з’являлася смуга горизонтальної прокрутки на мобільних пристроях.

Як це можна зробити?

width: 600px; max-width: 100%;

width: 100%; max-width: 600px;

Відповідь: не важливо, результат однаковий. Деякі скажуть:

другий варіант правильний;

насправді, різниця велика;

другий варіант краще підходить для батьківських блоків невеликої ширини;

перший варіант відстій;

другий варіант більш логічно описує поведінку вікна.

Погоджуся, злегка незрозуміло. Начебто підходи різні. Завжди краще протестувати демо на зменшення вікна.

Повість про властивості width і max-width

Про цю проблему зручно думати в такому плані: якщо елемент отрісовиваємих ширше, ніж наказано властивості max-width, то властивість виграло. Сценарії:

Батьківський блок завширшки 1000px

Судячи по ширині, елемент повинен бути 600px, що не порушує правила max-width. Тобто ми і отримаємо 600px!

Судячи по ширині, елемент повинен бути 1000px, що порушує правило max-width. У такому разі зменшуємо ширину вікна до 600px.

Батьківський блок завширшки 320px

По ширині елемент повинен бути 600px. Це порушує правило max-width, за яким елемент не може бути ширше 320px. У підсумку отримуємо наші 320px!

По ширині елемент повинен бути 320px. Це не порушує правило.

Якою б ширини не був батьківський елемент, цей набір правил задовольняє всім умовам. Майкл Лоутон говорить, що, є невеликі відмінності в тих випадках, коли вікно є флекс елементом.