Overflow-x — это свойство CSS, которое управляет тем, что происходит с содержимым элемента, когда оно выходит за его горизонтальные границы. Значение auto позволяет автоматически добавлять горизонтальную полосу прокрутки при необходимости.
Однако, когда мы используем эту опцию и содержимое элемента выходит за его границы, появляется не только горизонтальная полоса прокрутки, но и вертикальная. Почему это происходит?
Ответ прост: при использовании свойства overflow-x: auto браузер вычисляет размеры содержимого элемента со всем его расположением и добавляет обе полосы прокрутки, чтобы пользователь мог просматривать содержимое как по горизонтали, так и по вертикали. Даже если размера вертикальной полосы не достаточно для отображения всего содержимого, пользователь сможет использовать горизонтальную полосу прокрутки для просмотра всего содержимого по вертикали.
Используя свойство overflow-x: auto, мы обеспечиваем возможность горизонтальной прокрутки для элемента, но это может привести к появлению и вертикальной полосы прокрутки.