CSS OVERFLOW

❮ Prev Next ❯

Some content of a web page may be too big to fit into the area.CSS overflow property is used to handle contents which overflow its block level container.

Max-height give to this box is 100px.So as the content overflow it will create an overflow for height.which can be scrolled. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae autem nostrum praesentium ab modi eveniet voluptate enim assumenda. Autem impedit totam omnis officia ratione laboriosam vel debitis dolores dicta facilis! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat nihil consequuntur perferendis cum dolores, voluptas dolorem repudiandae architecto molestiae atque quisquam sequi doloremque aspernatur illo corporis commodi ut suscipit maiores!

Syntax

overflow: value;

CSS overflow values

Value	Description
visible	It is default value.It specifies that content is displayed outside the box and content is not clipped.
hidden	It specifies that content that overflowed is clipped and has no scroll bar.
scroll	It specifies that the extra content is clipped and to see those, a scroll bar is given.
auto	It also provides a scroll bar like above property but in this scroll bar is provided only when it's necessary.

Overflow visible

The overflow is visible by default.When the overflow value is set to visible it means the content is not clipped and extra content will be visible outside the box.

div.visible{
    overflow: visible;
    height: 200px;
    width: 300px;
    background-color: #00669949;
}

▶ Run the code

Output:

The content overflow and the content is visible outside the box.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et Itaque consequatur mollitia incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor, exercitationem numquam!

Overflow hidden

The overflow hidden property clips the content.When the overflow value is set to hidden it means the content is clipped and extra content will be hidden.

.hidden{
    overflow: hidden;
    height: 200px;
    width: 300px;
    background-color: #00669949;
}

▶ Run the code

Output:

The content overflow and the content which is outside the box is hidden.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor,nostrum amet quaerat cupiditate exercitationem numquam!

Overflow scroll

The overflow scroll property clips the content but extra content is visible by a scroll bar which is generated.

The scroll bar can be horizontal or vertical.

.scroll{
    overflow: scroll;
    height: 200px;
    width: 300px;
    background-color: #00669949;
}

▶ Run the code

Output:

The content overflows and the content which is outside the box can be seen by scrolling.Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque consequatur mollitia enim quia et incidunt esse nihil dolore excepturi iste, nostrum amet quaerat cupiditate nisi dolor, exercitationem numquam!

Overflow auto

If the overflow is clipped then auto property creates a scroll to make overflowed content visible.

The scroll bar created by auto can be horizontal or vertical.

.auto{
    overflow: auto;
    height: 200px;
    width: 300px;
    background-color: #00669949;
}

▶ Run the code

Output:

The content overflows and the content which is outside the box can be seen by scroll created by auto value.Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, eligendi fugiat. Labore facere provident dicta voluptatibus ea obcaecati quas asperiores hic, rem praesentium adipisci aliquid nisi. Rerum reprehenderit dolores laborum.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

❮ Prev Next ❯