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

Learn more

CSS Overflow-x Property

Edited: 2011-10-09 04:46

The Overflow-x Property of CSS is used to control the content of a box, if it takes up more space then what is in the box horizontally. The overflow-y Property of CSS can be used to control the content vertically. The same holds true for the Overflow property, which is used to set both the vertical and horizontal scrolling.

When a block has the overflow property applied, and a value of scroll, it will only work horizontally for images, and very long words. To get around this problem, you would need to nest a wrapping block, with a fixed width inside, and then place the textural content in that.

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.

Example

h1 {
  overflow-x: scroll;
}

Inherited? NO!

How the overflow-x property can be used.

The below example applies the overflow-x property to a parant block, and then includes a nested block with a fixed width, to enable scrolling for text. If we don't do this, the lines will simply wrap, and you won't be able to scroll.

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

  <head>
    <title>How to use the overflow-x property</title>
    <style type="text/css">
     .scrollbar {
      width: 150px;
      min-height: 400px;
      overflow-x: scroll;
     }
     .scrollwrap {
      width: 400px;
     }
    </style>
  </head>

  <body>

    <div class="scrollbar">
     <div class="scrollwrap">
      <p>This text will be shown inside a wrapping div element, inside a parant div with a scrollbar. The nested wrapper is required if you want to enable scrolling of text as well as images.</p>
     </div>
    </div>

  </body>

</html>

Brugbart Vision!