Как сделать скролл внутри блока 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 для другого блока