mozilla

Revision 5527 of overflow

  • Revision slug: CSS/overflow
  • Revision title: overflow
  • Revision id: 5527
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment no wording changes

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 displays 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-none") }}
{{ obsolete_inline() }} Use overflow:hidden instead.
{{ Cssxref("-moz-scrollbars-horizontal") }}
{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.
{{ Cssxref("-moz-scrollbars-vertical") }}
{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.
{{ Cssxref("-moz-hidden-unscrollable") }}
Is intended mainly for internal use and by themes. Disables scrolling of root elements, <html>, <body> by arrow keys and mouse wheel.

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 displays 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> <br>
</dd><dt>{{ Cssxref("-moz-scrollbars-none") }}</dt><dd>{{ obsolete_inline() }} Use<code> overflow:hidden </code>instead.</dd><dt>{{ Cssxref("-moz-scrollbars-horizontal") }}</dt><dd>{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.</dd><dt>{{ Cssxref("-moz-scrollbars-vertical") }}</dt><dd>{{ Deprecated_inline() }} Use of {{ Cssxref("overflow-x") }} and {{ Cssxref("overflow-y") }} is preferred.</dd><dt>{{ Cssxref("-moz-hidden-unscrollable") }}</dt><dd>Is intended mainly for internal use and by themes. Disables scrolling of root elements,<code> &lt;html&gt;</code>,<code> &lt;body&gt; </code>by arrow keys and mouse wheel.<br>
</dd></dl>
<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>
<h3 name="See_also">See also</h3>
<p>{{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}</p>
Revert to this revision