mozilla

Revision 5522 of overflow

  • Revision slug: CSS/overflow
  • Revision title: overflow
  • Revision id: 5522
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 6 words added, 11 words removed; page display name changed to 'overflow'

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

Browser Lowest Version
Internet Explorer 4.0
Firefox 1.0
Opera 4.0-7.0
Safari 1.0

 

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>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox</td> <td>1.0</td> </tr> <tr> <td>Opera</td> <td>4.0-7.0</td> </tr> <tr> <td>Safari</td> <td>1.0</td> </tr> </tbody>
</table>
<p> </p><h3 name="See_also"> See also </h3>
<p>{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}
</p>
Revert to this revision