mozilla

Revision 5521 of overflow

  • Revision slug: CSS/overflow
  • Revision title: overflow
  • Revision id: 5521
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Values */

Revision Content

{{ CSSRef() }}

Summary

overflow property specifies whether to clip content, render scroll bar or display overflow content of a block-level element.

  • {{ Xref_cssinitial() }}: {{ Cssxref("visible") }}
  • Applies to: non-replaced block-level elements, table cells, and inline-block elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

overflow: visible | hidden | scroll | auto | inherit

Values

{{ Cssxref("visible") }} 
Browser display overflow content without clipping, by rendering outside the element as a spill over.
{{ Cssxref("hidden") }} 
overflow content will be clipped, and no scrolling mechanism provided
{{ Cssxref("auto") }} 
scrollbars (a scrolling mechanism) will be automatically rendered to view content when it overflows.
{{ Cssxref("scroll") }} 
scrollbars will be rendered always regardless of whether content overflows or not. This can be used to avoid any problems with scrollbars appearing and disappearing in a dynamic environment.
{{ Cssxref("inherit") }}
{{ Cssxref("-moz-scrollbars-horizontal") }}
{{ Cssxref("-moz-scrollbars-none") }}
{{ Cssxref("-moz-scrollbars-vertical") }}
{{ Cssxref("-moz-hidden-unscrollable") }}

Note: All of these -moz-* values should be considered deprecated. Use of the overflow-x and overflow-y is preferred, although it does not replace the last of these.

Examples

{{ CSSRefExampleLink("overflow") }}

.sidebox {
  width: 300px;
  overflow: auto;
}

Notes

Specifications

Browser compatibility

(Sample Compatibility Chart)

Browser Lowest Version
Internet Explorer ?
Firefox 1
Netscape ?
Opera ?
Safari ?


See also

{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>overflow</code> property specifies whether to clip content, render scroll bar or display overflow content of a block-level element.
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("visible") }}
</li><li> Applies to: non-replaced block-level elements, table cells, and inline-block elements
</li><li> {{ Xref_cssinherited() }}: no </li><li> Percentages: n/a
</li><li> Media: {{ Xref_cssvisual() }} </li><li> {{ Xref_csscomputed() }}: as specified </li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">overflow: visible | hidden | scroll | auto | inherit
</pre>
<h3 name="Values"> Values </h3>
<dl><dt>{{ Cssxref("visible") }} </dt><dd> Browser display overflow content without clipping, by rendering outside the element as a spill over.
</dd><dt>{{ Cssxref("hidden") }} </dt><dd> overflow content will be clipped, and no scrolling mechanism provided
</dd><dt>{{ Cssxref("auto") }} </dt><dd> scrollbars (a scrolling mechanism) will be automatically rendered to view content when it overflows.
</dd><dt>{{ Cssxref("scroll") }} </dt><dd> scrollbars will be rendered always regardless of whether content overflows or not. This can be used to avoid any problems with scrollbars appearing and disappearing in a dynamic environment.
</dd><dt>{{ Cssxref("inherit") }}</dt><dd>
</dd><dt>{{ Cssxref("-moz-scrollbars-horizontal") }}</dt><dd>
</dd><dt>{{ Cssxref("-moz-scrollbars-none") }}</dt><dd>
</dd><dt>{{ Cssxref("-moz-scrollbars-vertical") }}</dt><dd>
</dd><dt>{{ Cssxref("-moz-hidden-unscrollable") }}</dt><dd>
</dd></dl>
<p>Note: All of these -moz-* values should be considered deprecated. Use of the overflow-x and overflow-y is preferred, although it does not replace the last of these.
</p>
<h3 name="Examples"> Examples </h3>
<p>{{ CSSRefExampleLink("overflow") }}
</p>
<pre class="eval">.sidebox {
  width: 300px;
  overflow: auto;
}
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-box/#overflow">CSS 3 box</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<p>(Sample Compatibility Chart)
</p>
<table class="standard-table"> <tbody><tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>?</td> </tr> <tr> <td>Firefox</td> <td>1</td> </tr> <tr> <td>Netscape</td> <td>?</td> </tr> <tr> <td>Opera</td> <td>?</td> </tr> <tr> <td>Safari</td> <td>?</td> </tr>
</tbody></table>
<p><br>
</p>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}
</p>
Revert to this revision