Making a div horizontally scrollable is easy by using CSS overflow property. There are different values in overflow property.
For example overflow: auto; and the axis hiding procedure like overflow-x: auto;. It will make only a horizontal scrollable bar.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Example 2: In this example use auto in place of overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- Making a div vertically scrollable using CSS
- How to horizontally center a div using CSS?
- How to overlay one div over another div using CSS
- How to split text horizontally on mouse move over using CSS ?
- How to make horizontal scrollable in a bootstrap row?
- How to make vertical scrollable rows in bootstrap?
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- How to make div not larger than its contents using CSS?
- How to make div height expand with its content using CSS ?
- How to make a div fill a remaining horizontal space using CSS?
- How to make div width expand with its content using CSS ?
- How to make a HTML div responsive using CSS ?
- How to make a div span two rows in a grid using CSS ?
- How to Horizontally Flip a Text Canvas using Fabric.js ?
- How to fixed one column and scrollable other column or columns in Bootstrap ?
- How to vertically and horizontally align flexbox to center ?
- How to align content of a div to the bottom using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.