Как сделать адаптивный scroll на сайте?

Question

[Maksym Sahaidak]

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

ВАЖНО
ответы по типу , поставь ограничение род. блоку не нужно, сам понимаю но суть не в этом, нужен именно адаптивный скролл, именно скролл в ширину.

Проблема в том что когда переполнение, вместо того что бы скролл появился в блоке в котором переполнение, скролл появляется в глобальном элементе window.

Повторюсь, ограничить родительский элмент не вариант, ширина должна быть зависима от ширины экрана, НАПРИМЕР если бы монитор был бы больше, скролла бы не было

Comments

[ildar-meyker]

https://codepen.io/ildar-meyker/pen/OJoWaZB

[Maksym Sahaidak]

ildar-meyker, ошибка была допущена, на в том месте, все я написал верно.

[imko]

Так значит родителя надо ограничить экраном а прокрутку родителем)

[Вадим]

Максим Сагайдак,

овторюсь, ограничить родительский элмент не вариант, ширина должна быть зависима от ширины экрана, НАПРИМЕР если бы монитор был бы больше, скролла бы не было

Так а зачем его ограничивать? У блока должно быть 2 пункта, чтобы было как Вы хотите:
1) он должен растягиваться на всю доступную ему ширину. Например, display: block
2) overflow-x: auto

Всё. Если ширины блока не хватает чтобы расположить все элементы, которые в нём содержатся - появится скролл. Если достаточно - не появится.

Answer 1

[Noder SS]

Контейнеру max-width: 100%; и overflow-x:auto;