By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Overflow-y Property

Created: 2013-06-28 00:49

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

visibleThe content is rendered outside the element.
hiddenThe content is clipped.
scrollThe browser should display a scroll bar, to view the rest of the content.
autoThe browser only shows a scrollbar, if the content requires it.


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

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


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



Brugbart Vision!