CSS Overflow Property

Reference on the CSS Overflow Property.

The CSS Overflow Property is used to control the content of a box, if it takes up more space then what is in the box.

To enable scrolling of text inside a block with its overflow set to scroll or auto, you would need to include a nested wrapper with a fixed width higher then the before mentioned parent element.

Possible Values

visible	The content is rendered outside the element.
hidden	The content is clipped.
scroll	The browser displays 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: scroll;
}

Inherited? NO!

How to use the Overflow property

The below shows how you can enable a scrollbar, both horizontally and vertically at the same time. Keep in mind that you need to include a nested wrapper, if you want to enable scrolling horizontally of text.

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

  <head>
    <title>How to use the overflow property of CSS</title>
    <style type="text/css">
     .Scroll {
      width: 15em;
      height: 15em;
      overflow: auto; /* Shows a scrollbar if needed */
     }
     .Wrapper {
      width: 30em;
      height: 30em;
     }
    </style>
  </head>

  <body>
   <div class="Scroll">
    <div class="Wrapper">
     <h1>How to use the Overflow Property</h1>
     <p>This example shows you how to use the overflow property to enable scrolling of block elements</p>
    </div>
   </div>
  </body>

</html>

Brugbart Vision!