Как сделать прокручивающийся блок css

Для создания прокручивающегося блока в CSS можно использовать свойство overflow. При значении overflow: auto или overflow: scroll, если содержимое блока не помещается в заданные размеры, то появляется полоса прокрутки.

Например, чтобы создать блок с фиксированными размерами, который будет прокручиваться по вертикали, можно использовать следующий код:

HTML:

<div class="scroll-container">
  <div class="scroll-content">
    <p>Здесь находится контент, который может не помещаться полностью в блоке</p>
  </div>
</div>

CSS:

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: auto; /* добавляем полосу прокрутки в случае необходимости */
  border: 1px solid #ccc; /* добавляем рамку для блока */
}

.scroll-content {
  width: 100%; /* устанавливаем ширину контента равной 100% блока */
}

Сначала мы создаем контейнер (div) с классом scroll-container и задаем фиксированные размеры этому блоку. Далее, добавляем полосу прокрутки с помощью свойства overflow. Устанавливаем рамку для блока, чтобы он был виден на странице.

Внутри контейнера создаем еще один элемент (div) с классом scroll-content, в который помещаем контент, который может не помещаться полностью в блоке.

Задаем ширину контента равной ширине контейнера (100%) и он будет как раз подстраиваться под размеры блока scroll-container.

Теперь, если контента много и он не помещается в блоке, появится полоса прокрутки, с помощью которой можно просматривать скрытый контент.