О полезном свойстве overflow Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока. overflow-x - отвечает за отображением содержания блочного элемента по горизонтали. overflow-y - отвечает за отображением содержания блочного элемента по вертикали. Код CSS CSS: .prokrutka { overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */ } Code .prokrutka { overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */ } Свойства и значения overflow visible - отображается все содержание элемента, даже за пределами установленной ширины. hidden - отображается только область внутри элемента, остальное скрыто. scroll - принудительно добавляется горизонтальная или горизонтальная (x) полоса прокрутки. auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше. Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности Код CSS Код: .prokrutka { width:150px; /* ширина нашего блока */ height:100px; /* высота нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */ } Code .prokrutka { width:150px; /* ширина нашего блока */ height:100px; /* высота нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */ } Принудительная установка прокрутки в блоке CSS Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка. Код HTML и CSS Код: .prokrutka { height:150px; /* высота нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow-x: scroll; /* прокрутка по горизонтали */ overflow-y: scroll; /* прокрутка по вертикали */ } Code .prokrutka { height:150px; /* высота нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow-x: scroll; /* прокрутка по горизонтали */ overflow-y: scroll; /* прокрутка по вертикали */ } Пример div блока с прокруткой Код HTML и CSS Код: <html> <head> <title>Пример работы CSS</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <style> .prokrutka { height: 200px; /* высота нашего блока */ width: 200px; /* ширина нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow-x: scroll; /* прокрутка по горизонтали */ overflow-y: scroll; /* прокрутка по вертикали */ } </style> </head> <body> <div class="prokrutka"> А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. </div> </body> </html> Code <html> <head> <title>Пример работы CSS</title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <style> .prokrutka { height: 200px; /* высота нашего блока */ width: 200px; /* ширина нашего блока */ background: #fff; /* цвет фона, белый */ border: 1px solid #C1C1C1; /* размер и цвет границы блока */ overflow-x: scroll; /* прокрутка по горизонтали */ overflow-y: scroll; /* прокрутка по вертикали */ } </style> </head> <body> <div class="prokrutka"> А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. </div> </body> </html> Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Лучше обернуть в <textarea></textarea> https://codepen.io/Rebldomakr/pen/RjYGGy Ну или же убрать overflow-x