CSS overflow-y Property - GeeksforGeeks

09 Aug, 2019
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
Property 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:<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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>                    Output:
Example:
<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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>                    
Output:
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:<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    Output:
Example:
<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    
Output:
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:<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    Output:
<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    
Output:
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:<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    Output:
Example:
<!DOCTYPE html><html><head>    <title>        CSS overflow-y Property    </title>    <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: 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>                    
Output:
Supported Browsers: The browser supported by overflow-y property are listed below:
Chrome
Internet Explorer
Firefox
Opera
Safari
CSS-Basics
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?