Overflow-x and overflow-y

The overflow-x and overflow-y style properties specify whether the content of a block-level element should be clipped when it overflows the element's box. The overflow-x property controls the horizontal clipping, while overflow-y controls the vertical clipping.

The overflow-x and overflow-y style properties specify whether the content of a block-level element should be clipped when it overflows the element's box. The overflow-x property controls the horizontal clipping, while overflow-y controls the vertical clipping.

Overflows

Please refer to http://www.w3.org/TR/css3-box/#overflow for more information.

Configuring clipping

You use the overflow-x and overflow-y properties, or the overflow shorthand property to control clipping. The following keywords are supported: 'visible', 'hidden', 'scroll' and 'auto'. The default value of 'visible' indicates that the content should not be clipped, i.e. it may be rendered outside the box. 'hidden' means that the content should be clipped but scroll bars should not be visible, i.e. the content outside the box will be invisible. 'scroll' indicates that the content should be clipped and scroll bars should be enabled. 'auto' indicates that the default browser configuration should be used.

The overflow shorthand property takes two values. The first value of the property corresponds to the overflow-x property, while the second value corresponds to the overflow-y property. When the second value is not specified, then it is assumed to be the same as the first value.

If the values of overflow-x and overflow-y are different and the targeted device supports only a single value for the overflow shorthand property, then MCS will use the value with a greater priority. The priority of the keywords is as follows: 'hidden' < 'visible' < 'scroll' < 'auto', where 'hidden' is of lesser priority than 'visible', and so on. For example, in the case described previously, MCS will convert the overflow: hidden scroll; style rule to overflow: scroll;.

Features

Support for the overflow-x property is represented by the following feature:

Support for the overflow-y property is represented by the following feature:

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:sel="http://www.w3.org/2004/06/diselect">
  <head>
    <title>Overflow</title>
    <style type="text/css">
      div#overflow_div_css3_double_value_shorthand {
        overflow: hidden scroll;
        width: 100px;
        height: 100px;
        background-color:green;
        border:2px solid black;
      }
      div#overflow_div_css3_individual_properties {
        overflow-x: scroll;
        overflow-y: scroll;
        width: 100px;
        height: 100px;
        background-color:green;
        border:2px solid black;
      }
      div#overflow_div_css2_individual_property {
        overflow: scroll;
        width: 100px;
        height: 100px;
        background-color:green;
        border:2px solid black;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Examples of overflow usage</h2>
      <h4>CSS3 double value shorthand</h4>
      <div>Styles specified using double value shorthand. Horizontal scrollbar should be visible
        depending on content amount. Vertical scrollbar should be always visible.</div>
      <div id="overflow_div_css3_double_value_shorthand"> Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. </div>
      <h4>CSS3 Individual properties</h4>
      <div>Styles specified using individual properties. Both scrollbars should be always
        visible.</div>
      <div id="overflow_div_css3_individual_properties"> Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. </div>
      <h4>CSS2 property</h4>
      <div>Styles specified using one property. Both scrollbars should be always visible.</div>
      <div id="overflow_div_css2_individual_property"> Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit. </div>
      <div style="border: 1px solid white;padding:4px">Bottom sentence tests individual property
        features and shows, whether individual properties (overflow-x and overflow-y) are supported
        on your device. <div style="background-color: white;color: black;">Your device <span
            style="color:red">does <sel:select>
              <sel:when expr="mcs:feature('mcs:style.OverflowX') and
                mcs:feature('mcs:style.OverflowY')"> support </sel:when>
              <sel:otherwise> not support </sel:otherwise>
            </sel:select>
          </span> individual properties. </div>
      </div>
    </div>
  </body>
</html>

Related topics