Making a div vertically scrollable using CSS

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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-x: 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>                    

chevron_right


Output:
vertically scroll



Example 2: In this example use auto in place of overflow-x:hidden; and overflow-y:auto; to make div vertically scrollable.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
vertically scroll



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.