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

Learn more

CSS Overflow Property

Reference on the CSS Overflow Property.

Edited: 2011-11-04 07:27

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

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


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

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

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


Brugbart Vision!