How to make a div scrollable vertically and horizontally

Sometimes, We want to add a vertical or horizontal container to HTML elements.

This post explains the way how to add a horizontal and vertical scrollbar. It also includes CSS styles to change the color of a scrollbar.

You can add a scrollbar to the HTML body, table, div, and any valid HTML element using CSS.

How to add a scrollbar to the div element

Suppose you have an HTML div element, You declared width of 300px and height:200px.

You added content that takes more than the given height and width.

Then It overflows and displays the default scrollbar (horizontal and vertical) on the web page.

Let’s see a div example example

The output displays in the browser as content displayed outside of a given div width and height.

To avoid this, We can add a scrollbar using overflow-x for the horizontal and overflow-y for the vertical scrollbar.

and contain the following values.

visible: default and displays the content outsides of a given resolution if overflow occurs invisible: only display content that is occupied in a given resolution is visible and outside content is invisible.

how to make table vertically scrollable in html

how to make a web page scroll vertically