CSS overflow-y Property

The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element’s top and bottom edges. The content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property.

Syntax:

overflow-y: scroll | hidden | visible | auto

Values:

  • Scroll: If the value assigned to the property is “scroll” then the content is clipped to fit the element and a scrollbar is displayed by the browser to help scroll the overflowed content. The scrollbar is added regardless of the content being clipped.

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .content {
                background-color: lightgreen;
                height: 100px;
                width: 250px;
                overflow-y: scroll;
            }
        </style>
    </head>
      
    <body>
        <h1>The overflow-y Property</h1>
          
        <!-- Below paragraph doesnot have a fixed width or height
            and has no overflow set. So, it will just take up the 
            complete width of it's parent to fit the content -->
        <p>
            The CSS overflow-y property specifies the behavior
            of content when it overflows a block-level element’s
            top and bottom edges. The content may be clipped, 
            hidden or a scrollbar may be displayed as specified.
        </p>
          
          
        <h2>overflow-y: scroll</h2>
        <!-- Below div element has fixed height and width and thus 
            overflow may occur. -->
        <div class="content">
            GeeksforGeeks is a computer science portal with a 
            huge variety of well written and explained 
            computer science and programming articles,
            quizzes and interview questions. The portal also 
            has dedicated GATE preparation and competitive 
            programming sections.
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:
    overflow-y: scroll

  • Hidden: On assigning “hidden” as the value to the property, the content is clipped to fit the element. No scrollbars are provided and the content is hidden.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .content {
                background-color: lightgreen;
                height: 100px;
                width: 250px;
                overflow-y: hidden;
            }
        </style>
    </head>
    <body>
        <h1>The overflow-y Property</h1>
          
        <!-- Below paragraph doesnot have a fixed width or height
            and has no overflow set. So, it will just take up the 
            complete width of it's parent to fit the content -->
        <p>
            The CSS overflow-y property specifies the behavior 
            of content when it overflows a block-level element’s 
            top and bottom edges. The content may be clipped, 
            hidden or a scrollbar may be displayed as specified.
        </p>
          
        <h2>overflow-y: hidden</h2>
          
        <!-- Below div element has fixed height and width and the 
            overflow is set as hidden, so the bottom content 
            overflowing will be clipped -->
        <div class="content">
            GeeksforGeeks is a computer science portal with a huge
            variety of well written and explained computer science 
            and programming articles, quizzes and interview questions. 
            The portal also has dedicated GATE preparation and 
            competitive programming sections.
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:
    overflow-y: hidden

  • Visible: If the value assigned to the “overflow-y” property is “visible” then the content is not clipped and may overflow out to the top or bottom of the containing element.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .content {
                background-color: lightgreen;
                height: 100px;
                width: 250px;
                overflow-y: visible;
            }
        </style>
    </head>
    <body>
        <h1>The overflow-y Property</h1>
          
        <!-- Below paragraph doesnot have a fixed width or height
            and has no overflow set. So, it will just take up the 
            complete width of it's parent to fit the content -->
        <p>
            The CSS overflow-y property specifies the behavior 
            of content when it overflows a block-level element’s 
            top and bottom edges. The content may be clipped,
            hidden or a scrollbar may be displayed as specified.
        </p>
          
        <h2>overflow-y: visible</h2>
          
        <!-- In the below div the overflowing content is visible -->
        <div class="content">
            GeeksforGeeks is a computer science portal with a huge 
            variety of well written and explained computer science 
            and programming articles, quizzes and interview 
            questions. The portal also has dedicated GATE 
            preparation and competitive programming sections.
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:
    overflow-y: visible

  • Auto: The behavior of auto depends on the content and scrollbars are added only when the content overflows, unlike that of the scroll value where the scrollbar is added regardless of overflow.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            .content {
                background-color: lightgreen;
                height: 100px;
                width: 250px;
                overflow-y: auto;
            }
        </style>
    </head>
      
    <body>
        <h1>The overflow-y Property</h1>
          
        <!-- Below paragraph doesnot have a fixed width or height
            and has no overflow set. So, it will just take up the 
            complete width of it's parent to fit the content -->
        <p>
            The CSS overflow-y property specifies the behavior 
            of content when it overflows a block-level element’s 
            top and bottom edges. The content may be clipped, 
            hidden or a scrollbar may be displayed as specified.
        </p>
          
        <h2>overflow-y: auto</h2>
          
          
        <div class="content">
            GeeksforGeeks is a computer science portal with a huge
            variety of well written and explained computer science 
            and programming articles, quizzes and interview questions. 
            The portal also has dedicated GATE preparation and 
            competitive programming sections.
        </div>
    </body>
    </html>                    

    chevron_right

    
    

    Output:
    overflow-y: auto

Supported Browsers: The browser supported by overflow-y property are listed below:

  • Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Aspiring web developer and competitive programmer Lets have an update

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.