Revision 5519 of overflow

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

Revision Content

{{template.CSSRef()}}

Summary

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

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

Syntax

overflow: visible | hidden | scroll | auto | inherit

Values

{{template.Cssxref("visible")}} 
Browser display overflow content without clipping, by rendering outside the element as a spill over.
{{template.Cssxref("hidden")}} 
overflow content will be clipped, and no scrolling mechanism provided
{{template.Cssxref("auto")}} 
scrollbars (a scrolling mechanism) will be automatically rendered to view content when it overflows.
{{template.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.
{{template.Cssxref("inherit")}}

Examples

{{template.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

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

Revision Source

<p> 
{{template.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> {{template.Xref_cssinitial()}}: {{template.Cssxref("visible")}}
</li><li> Applies to: 	non-replaced block-level elements, table cells, and inline-block elements
</li><li> {{template.Xref_cssinherited()}}: no 
</li><li> Percentages: n/a
</li><li> Media: {{template.Xref_cssvisual()}}  
</li><li> {{template.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>{{template.Cssxref("visible")}} </dt><dd> Browser display overflow content without clipping, by rendering outside the element as a spill over.
</dd><dt>{{template.Cssxref("hidden")}} </dt><dd> overflow content will be clipped, and no scrolling mechanism provided
</dd><dt>{{template.Cssxref("auto")}} </dt><dd> scrollbars (a scrolling mechanism) will be automatically rendered to view content when it overflows.
</dd><dt>{{template.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>{{template.Cssxref("inherit")}}</dt><dd>
</dd></dl>
<h3 name="Examples"> Examples </h3>
<p>{{template.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>{{template.Cssxref("overflow-x")}}, {{template.Cssxref("overflow-y")}}, {{template.Cssxref("clip")}}, {{template.Cssxref("display")}}
</p>
Revert to this revision