1. Technology

overflow-x

By

overflow-x Description:

The overflow-x property tells the browser how to handle content that exceeds the physical vertical bounds of its container element. For example, you might have a box that is set to 300x300 pixels, with an image inside that is 500x500 pixels. In standard HTML, the image would display the entire 500x500 pixels. With the CSS 2 overflow-x property, you can add a scroll bar on the right side that scrolls up and down. You can also use overflow-x to cut off the excess on the bottom but not the sides.

overflow-x in CSS Versions:

overflow-x Syntax:

overflow-x: visible | hidden | scroll | auto | inherit

  • visible
    The content is not clipped and can be seen outside the box.
  • hidden
    The content is clipped on the bottom and cannot be seen.
  • scroll
    The content is clipped on the bottom, but scroll bars are displayed to show the missing content.
  • auto
    If there is extra content on the bottom, scroll bars will be shown, and if there is not, no scroll bars will display.
  • inherit
    The element should have the same overflow-x value as the parent element.

overflow-x Browser Support:

overflow-x Initial/Default Value:

visible

overflow-x Applies To:

Non-replaced block-level elements, table cells, and inline-block elements.

overflow-x Inheritance:

This property is not inherited.

overflow-x Media Type:

  • Visual

overflow-x Examples:

Add a scroll bar on the right for long content with overflow-x:auto; and overflow-y: hidden;

<div style="width:300px; height:300px; border: solid thin black; overflow-x: auto; overflow-y: hidden;">
... DIV contents
</div>

Overflow-x and Overflow-y Examples

overflow Special Notes:

  • The various states of overflow-x do not conform well to the specification in all browsers. Be sure to test so that you are getting the results you expect. For example, hidden removes scroll bars and clips the content in Internet Explorer, but leaves scroll bars on the content in Chrome, Firefox, Opera, and Safari.
  • In every browser I tested (Chrome, Firefox, Internet Explorer, Opera, and Safari), setting overflow-x changed the default for overflow-y to auto in some instances, even when I had not set overflow-y.
  • Thus if you set overflow-x, you should set overflow-y as well, to get the exact results you want.
  • Setting the value of overflow-x to scroll will leave the scroll bar on the box even if there isn’t enough content to warrant it.

©2014 About.com. All rights reserved.