Как сделать полосу прокрутки адаптивному елементу?

Для создания адаптивной полосы прокрутки элемента в HTML, вы можете использовать CSS свойство overflow.

Свойство overflow позволяет контролировать поведение элемента, когда его содержимое выходит за пределы его размеров. Для создания полосы прокрутки установите значение overflow в auto или scroll.

Например, если у вас есть контейнер <div>, и вы хотите добавить адаптивную полосу прокрутки, вам нужно добавить CSS правило следующего вида:

div {
  overflow: auto;
}

Это свойство overflow автоматически добавит горизонтальную и/или вертикальную полосу прокрутки, только когда содержимое элемента выходит за его границы. Если содержимое полностью помещается в элемент, полосы прокрутки не будут отображаться.

Вы также можете добавить дополнительные CSS правила для настройки внешнего вида полосы прокрутки, такие как overflow-x и overflow-y, чтобы управлять только горизонтальной или вертикальной полосой прокрутки соответственно.

Например:

div {
  overflow-x: auto; /* горизонтальная полоса прокрутки */
  overflow-y: scroll; /* вертикальная полоса прокрутки */
}

Кроме того, вы можете определить свойства width и height, чтобы установить размеры элемента, и max-width и max-height, чтобы ограничить его максимальные размеры.

div {
  width: 100%;
  height: 200px;
  max-width: 500px;
  max-height: 300px;
  overflow: auto;
}

Таким образом, вы создадите адаптивную полосу прокрутки для вашего элемента, которая будет отображаться только при необходимости, когда содержимое выходит за пределы его размеров.