Ниже шесть классических дефектов раскладки. В каждом — живой «сломанный» результат слева по смыслу (❌) и исправленный (✅), плюс код обоих вариантов.
1. 100vw → горизонтальный скролл
Блок шириной 100vw шире контейнера на ширину скроллбара — появляется прокрутка вбок. Контейнер ниже намеренно узкий, чтобы было видно, как «сломанный» блок вылезает.
❌ width: 100vw — вылезает, появился скролл ниже
✅ max-width: 100% — вписался ровно
/* ❌ ломается: vw считается с учётом скроллбара */
.hero { width: 100vw; }
/* ✅ правильно: остаёмся в пределах контейнера */
.hero { max-width: 100%; }2. Забытый box-sizing: border-box
Слева ширина 100% плюс padding и border вылезают наружу. Справа border-box включает их в ширину — блок остаётся ровно по контейнеру.
❌ content-box: 100% + padding вылезает
✅ border-box: всё внутри
/* ❌ padding и border прибавляются к ширине */
.field { box-sizing: content-box; width: 100%; padding: 16px; }
/* ✅ padding и border входят в ширину */
*, *::before, *::after { box-sizing: border-box; }
.field { width: 100%; padding: 16px; }3. Фиксированная height обрезает контент
Жёсткая высота режет длинный текст. min-height задаёт минимум, но позволяет блоку расти.
❌ height: 60px + overflow:hidden
✅ min-height: 60px
/* ❌ обрезает всё, что не влезло */
.card { height: 60px; overflow: hidden; }
/* ✅ растёт под содержимое */
.card { min-height: 60px; }4. Магические числа vs переменные/относительные единицы
Подогнанные «на глаз» пиксели ломаются при смене контента и шрифта. Относительные единицы и переменные масштабируются.
❌ margin-left: 137px — подогнано под один экран
✅ gap через flex + переменная
/* ❌ магическое число */
.label { margin-left: 137px; }
/* ✅ предсказуемый отступ */
:root { --gap: 1rem; }
.row { display: flex; gap: var(--gap); }5. Война !important vs нормальный каскад
Подавление через !important мешает обычным правилам менять стиль. Уберите его — и модификатор класса снова работает.
❌ базовый цвет «прибит» !important — модификатор бессилен
✅ без !important — модификатор переопределяет
/* ❌ перекричали каскад — теперь ничего не переопределить */
.button { background: #64748b !important; }
.button--danger { background: #dc2626; } /* не сработает */
/* ✅ обычный каскад: модификатор сильнее по порядку/специфичности */
.button { background: #64748b; }
.button--danger { background: #dc2626; }6. overflow: hidden прячет нужный контент
overflow: hidden для борьбы с «вылезанием» заодно срезает выпадашки, тени и подсказки. Лучше устранить причину переполнения, а не прятать его.
❌ overflow:hidden срезал «хвост» подсказки
✅ контент виден целиком
/* ❌ спрятали симптом — потеряли контент */
.tooltip-wrap { overflow: hidden; height: 34px; }
/* ✅ убрали фикс. высоту, дали блоку дышать */
.tooltip-wrap { } /* контент сам задаёт высоту */width, box-sizing, height) — увидишь, как он встаёт на место в реальном времени.