Как использовать overflow если нужен scroll?

Для прокрутки используют `overflow: auto` (скролл появляется при необходимости) или `overflow: scroll` (скролл всегда). Задают на элементе с ограниченной высотой/шириной.

Значения overflow

auto (рекомендуется)

Скролл появляется только когда контент не помещается:

.container {
  height: 300px;
  overflow: auto; /* скролл при переполнении */
}

scroll

Скроллбар всегда виден (даже если контент помещается):

.container { overflow: scroll; }

hidden

Обрезает контент без скролла.

visible (по умолчанию)

Контент выходит за границы, скролла нет.

По осям

.container {
  overflow-x: auto;    /* горизонтальный скролл */
  overflow-y: scroll;  /* вертикальный */
  overflow: hidden auto; /* x: hidden, y: auto */
}

Обязательное условие

Для появления скролла элемент должен иметь ограниченный размер (height/width/max-height), иначе он растянется под контент и скролла не будет:

.container {
  max-height: 400px; /* ограничение → скролл при превышении */
  overflow-y: auto;
}

Практика

• Скролл при необходимости → overflow: auto (не занимает место зря).
• Только вертикальный → overflow-y: auto.
• Стилизация скроллбара — ::-webkit-scrollbar (webkit) / scrollbar-width (стандарт).

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

Для прокрутки — overflow: auto (скролл появляется при переполнении, рекомендуется) или overflow: scroll (всегда виден). По осям — overflow-x/overflow-y. Обязательное условие — ограниченный размер элемента (height/max-height), иначе он растянется под контент и скролла не будет. auto предпочтительнее (не показывает лишний скроллбар).