Как в CSS избежать переполнения контента?

Переполнения контента избегают, давая блокам гибкие размеры и разрешая перенос, а там, где содержимое может быть больше блока, — управляя его поведением через overflow.

Профилактика

• Не фиксировать высоту блоков с текстом — min-height вместо height.
• Перенос длинных слов и ссылок: overflow-wrap: anywhere (или word-break: break-word).
• Картинки и видео: max-width: 100%; height: auto.
• Flex-элементы: min-width: 0, иначе длинное содержимое распирает элемент.
• Grid: minmax(0, 1fr) вместо 1fr.
• Гибкие единицы вместо фиксированных px для ширин.

.card { min-height: 120px; overflow-wrap: anywhere; }
.card img { max-width: 100%; height: auto; }
.row > .text { min-width: 0; }

Если переполнение возможно

• overflow: auto — прокрутка;
• text-overflow: ellipsis с white-space: nowrap; overflow: hidden — многоточие в одну строку;
• line-clamp — обрезка до N строк.

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

Гибкие размеры, overflow-wrap, max-width: 100% для медиа и min-width: 0 во flex; где содержимое может быть больше — overflow: auto или многоточие.

Подробнее: MDN — Переполнение содержимого