Author: MDBootstrap
CSS Overflow
The overflow
property specifies whether to clip content or
to add scrollbars when the content of an element is too big to fit in a specified
area.
The overflow
property has the following values:
visible
- Default. The overflow is not clipped. It renders outside the element's boxhidden
- The overflow is clipped, and the rest of the content will be invisiblescroll
- The overflow is clipped, but a scrollbar is added to see the rest of the contentauto
- If overflow is clipped, a scrollbar should be added to see the rest of the content
Note: The overflow
property only works for block
elements with a specified height.
overflow: visible
By default, the overflow is visible
, meaning that it is not clipped and
it
renders outside the element's box:
.example-overflow-1 {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
<div class="example-overflow-1">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.</div>
Live preview
overflow: hidden
With the hidden
value, the overflow is clipped, and the rest of the
content is hidden:
.example-overflow-2 {
width: 200px;
height: 50px;
background-color: #eee;
overflow: hidden;
}
<div class="example-overflow-2">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.</div>
Live preview
overflow: scroll
Setting the value to scroll
, the overflow is clipped and a scrollbar is added to scroll
inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not
need it):
.example-overflow-3 {
width: 200px;
height: 50px;
background-color: #eee;
overflow: scroll;
}
<div class="example-overflow-3">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.</div>
Live preview
overflow-x and overflow-y
The overflow-x
and overflow-y
properties
specifies
whether to change the overflow of content just horizontally or vertically (or
both):
overflow-x
specifies what to do with the left/right edges of the
content.
overflow-y
specifies what to do with the top/bottom edges of the
content.
.example-overflow-4 {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}
<div class="example-overflow-4">You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's box.</div>
Live preview
Previous lesson Next lesson
Spread the word: