Как исправить переполнение контентом в CSS?

Исправление переполнения начинается с поиска виновника: какой элемент шире или выше, чем должен быть.

Как найти

• DevTools: наведите на элементы и найдите тот, что вылезает за границу; в Firefox есть отметка «overflow» у такого элемента.
• Временное правило для поиска:

* { outline: 1px solid red; }

Частые причины и решения

• Длинное слово, URL или код — overflow-wrap: anywhere.
• Картинка или видео без ограничений — max-width: 100%; height: auto.
• Flex-элемент не сжимается — min-width: 0 (или overflow: hidden) у элемента.
• Grid-колонка распирается — grid-template-columns: minmax(0, 1fr).
• `width: 100vw` — не учитывает полосу прокрутки; лучше 100%.
• Фиксированная высота — min-height вместо height.
• Таблица — обернуть в контейнер с overflow-x: auto.

Если содержимое правда может быть больше

overflow: auto, text-overflow: ellipsis, line-clamp — показать прокрутку или аккуратно обрезать.

Коротко для собеседования

Найти виновника в DevTools, затем: перенос слов, max-width: 100% для медиа, min-width: 0 во flex, minmax(0, 1fr) в grid, без 100vw и фиксированных высот.

Подробнее: MDN — overflow-wrap