CSS Overflow-y Property

The Overflow-y Property of CSS is used to control what happens, if a elements content takes up more space then available vertically. The overflow-x Property of CSS can be used to control the content horizontally.

This property can be used on elements that has a fixed height, or whos parents has a fixed height.

You can use the Overflow property to set both vertical and horizontal scrolling at the same time.

Possible Values

visible	The content is rendered outside the element.
hidden	The content is clipped.
scroll	The browser should display a scroll bar, to view the rest of the content.
auto	The browser only shows a scrollbar, if the content requires it.

Example

h1 {
  overflow-y: scroll;
}

Inherited? NO!

How the overflow-y property can be used.

The below example applies the overflow-y element on a div element, with a fixed height.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>How to use the overflow-y property</title>
    <style type="text/css">
     div {
      width: 150px;
      height: 150px;
      overflow-y: scroll;
     }
    </style>
  </head>

  <body>

    <div>
      <p>This example shows a div with a fixed height, and a overflow-y value of scroll. This would create a vertical scrollbar whenever the content of the div takes up more space vertically then whats available. I.e. In case the div has a fixed height.</p>
    </div>

  </body>

</html>

Brugbart Vision!

Possible Values

Example

How the overflow-y property can be used.

Links