Making a div vertically scrollable using CSS

10 May, 2022
Making a div vertically 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:hidden; and overflow-y:auto;. It will make vertical and horizontal scrollable bar and the auto will make only vertically scrollable bar. 
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. 
Example 1: 
html
<!DOCTYPE html><html>    <head>        <style>            h1 {                color:Green;            }            div.scroll {                margin:4px, 4px;                padding:4px;                background-color: green;                width: 500px;                height: 110px;                overflow-x: hidden;                overflow-y: auto;                text-align:justify;            }        </style>    </head>    <body>        <center>        <h1>GeeksforGeeks</h1>        <div class="scroll">It is a good platform to learn programming.        It is an educational website. Prepare for the Recruitment drive        of product based companies like Microsoft, Amazon, Adobe etc with        a free online placement preparation course. The course focuses        on various MCQ's & Coding question likely to be asked in the        interviews & make your upcoming placement season efficient and        successful. Also, any geeks can help other geeks by writing        articles on the GeeksforGeeks, publishing articles follow few        steps that are Articles that need little modification/improvement        from reviewers are published first. To quickly get your articles        reviewed, please refer existing articles, their formatting style,        coding style, and try to make you are close to them. In case you        are a beginner, you may refer Guidelines to write an Article        </div>        </center>    </body></html>                   
Output:
                             
Example 2: In this example use auto in place of overflow-x:hidden; and overflow-y:auto; to make div vertically scrollable. 
html
<!DOCTYPE html><html>    <head>        <style>            h1 {                color:Green;            }            div.gfg {                margin:5px;                padding:5px;                background-color: green;                width: 500px;                height: 110px;                overflow: auto;                text-align:justify;            }        </style>    </head>    <body>        <center>        <h1>GeeksforGeeks</h1>        <div class="gfg">It is a good platform to learn programming.        It is an educational website. Prepare for the Recruitment drive        of product based companies like Microsoft, Amazon, Adobe etc with        a free online placement preparation course. The course focuses        on various MCQ's & Coding question likely to be asked in the        interviews & make your upcoming placement season efficient and        successful. Also, any geeks can help other geeks by writing        articles on the GeeksforGeeks, publishing articles follow few        steps that are Articles that need little modification/improvement        from reviewers are published first. To quickly get your articles        reviewed, please refer existing articles, their formatting style,        coding style, and try to make you are close to them. In case you        are a beginner, you may refer Guidelines to write an Article        </div>        </center>    </body></html>                   
Output: 
                                    
CSS is the foundation of webpages, and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
ankit bajpai
hardikkoriintern
CSS-Misc
Picked
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.