Как сделать скролл внутри блока css

Для создания блока фиксированного размера с возможностью прокрутки по горизонтали и вертикали необходимо использовать свойство overflow.

Overflow может принимать следующие значения:

• visible: По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.
• hidden: Контент обрезается, без предоставления прокрутки.
• scroll: Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могут печатать переполненное содержимое.
• auto: Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

Рассмотрим пример.

Исходный HTML документ:

<div>
  Пример текста, который будет в блоке с полосами прокрути - как 
  горизонтальной так и вертикальной. Для того что бы ими можно было 
  воспользоваться, добавим д____л____и____н____н____о_____е  слово.
</div>

Стили:

div {
  border: 1px solid #000;
  width: 200px;
  height: 50px;
  /* Включаем отображение полос прокрутки по горизонтали
  и по вертикали */
  overflow: auto;
  padding: 20px;
}

Результат:

А если блок адаптивный, а мне нужно сделать горизонтальный скрол?

ого

огого

Не работает, когда размер блока установлен в %, но меня выручило position: fixed и background: white для другого блока

Прокрутка внутри блока появляется, когда у блока ограничен размер и задан overflow:

.list {
  max-height: 300px;
  overflow-y: auto;
}

auto показывает полосу прокрутки только при необходимости, scroll — всегда.

Горизонтальный скролл в адаптивном блоке

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

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.tabs > * {
  flex-shrink: 0;
}

Блок займёт доступную ширину, а элементы, которые не поместились, уйдут в прокрутку. Для текста: white-space: nowrap; overflow-x: auto;.

Широкие таблицы на телефоне оборачивают в блок со скроллом:

<div style="overflow-x: auto">
  <table>…</table>
</div>

Не работает при высоте в процентах

Ещё один вопрос из комментариев. height: 50% считается от высоты родителя. Если у родителя высота не задана, процент не работает, и блок растягивается по содержимому — прокрутки нет.

Решения:

• задайте высоту в vh или пикселях: max-height: 60vh;
• задайте высоту всей цепочке родителей, вплоть до html и body;
• во flex-колонке растяните блок через flex: 1 и добавьте min-height: 0:

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

Без min-height: 0 flex-элемент растягивается по содержимому и не даёт прокрутки — это самая частая причина.

Оформление полосы прокрутки

.list {
  scrollbar-width: thin;
  scrollbar-color: #0082ff transparent;
}

Прокрутка не уходит на страницу

Когда список докручен до конца, прокрутка переходит на страницу. Запретить:

.list {
  overscroll-behavior: contain;
}

Прокрутку и flexbox разбирают в курсе «Профессиональная вёрстка».