CSS overflow – visible, hidden and scroll for overflowing content

CSS overflow property decides how to display content if it goes beyond the boundaries of a block (e.g. when inside div).

CSS property overflow

CSS version: CSS 2.1
Value: visible | hidden | scroll | auto | inherit
Initial: visible
Applies to: block containers
Inherited: no
Note that overflow applies to both x and y axis. One can also use overflow-x and overflow-y separately. These behave similarly.

overflow values

visibleDefault. content is visible.
hiddenContent is hidden/clipped.
scrollContent is clipped but scrollable. Scroll bar appears even when not clipped. Note that on Mac depending upon General show scroll settings (if auto), this appears similar to scroll:auto
autoscrollable whenever content is clipped. When not clipped, scroll bar would not appear.
inheritinherit from parent

Example – overflow:visible

Here content text from first div is overflowing outside div and is visible. Note that overflow:visible is default value so it is not added to style.

<style type="text/css">
.box1 {
  width: 100px;
  height: 40px;
  background-color:lightgreen;
}
.box2 {
  width: 100px; height:100px;
  background-color:lightgray;
}
</style>

<div class="box1">
This is some text which can oveflow and overlap with other elements.
</div>
<div class="box2">
</div>
refresh

Example – overflow:hidden

Here overflowing content text from div is hidden/clipped.

<style type="text/css">
.box1 {
  width: 100px;
  height: 60px;
  background-color:lightgreen;
  overflow:hidden;
}
</style>

<div class="box1">
hidden example - this is some text which will get clipped.
</div>
refresh

Example – overflow:scroll

Here overflowing content text from div is hidden/clipped and is scrollable.

<style type="text/css">
.box1 {
  background-color:lightgreen;
  width: 200px; height: 50px;
  overflow:scroll;
}
.box2 {
  background-color:lightgreen;
  width: 300px; height: 60px;
  overflow:scroll;
}
</style>

<div class="box1">
scroll - this is some text which will get clipped and scroll will appear.
</div>
<br/>
<div class="box2">
scroll - this is some text which will not get clipped but scroll will still appear.
</div>
refresh

Example – overflow:auto

Here overflowing content text from div is hidden/clipped and is scrollable when text get clipped. Note that as per CSS overflow spec this behaviour is browser dependent.

<style type="text/css">
.box1 {
  background-color:lightgreen;
  width: 200px; height: 50px;
  overflow:auto;
}
.box2 {
  background-color:lightgreen;
  width: 300px; height: 60px;
  overflow:auto;
}
</style>

<div class="box1">
auto - this is some text which will get clipped and scroll will appear.
</div>
<br/>
<div class="box2">
auto - this is some text which will not get clipped but scroll will also not appear.
</div>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments