CSS Overflow Property
Understanding CSS Overflow Property
The CSS overflow property controls how content is displayed when it overflows an element's box.
CSS Overflow
The overflow property can be used to add scrollbars to an element when its content exceeds the element's specified size.
Values of the overflow property:
| Value | Description |
|---|---|
| visible | The default value. Content is not clipped and may be rendered outside the element's box. |
| hidden | Content is clipped, and the rest of the content will be invisible. |
| scroll | Content is clipped, but scrollbars are added to see the rest of the content. |
| auto | Scrollbars are added only if the content is clipped. |
| inherit | The property is inherited from the parent element. |
Note: The overflow property only works for block elements with a specified height.
Note: On OS X Lion (Mac systems), scrollbars are hidden by default and only appear when being used (setting overflow: scroll behaves the same).
overflow: visible
By default, the value of overflow is visible, which means content may overflow the element's box:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webcode101(webcode101.com)</title>
<style>
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
</style>
</head>
<body>
<div class="visible">
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
<p>Content will overflow the element's box.</p>
</div>
</body>
</html>