EDUCBA

Home Software Development Software Development Tutorials CSS Tutorial CSS Overflow

CSS Overflow

By Priya PedamkarPriya Pedamkar

CSS Overflow

Introduction to CSS Overflow

The CSS Overflow property always decided what will happen if the content of the page overflow from an elements box area. This property specifies whether absolutely positioned elements content (clip content) or adding a scrollbar to the content, if at all if the content is too big to align within the specified box area. This property generally has 4 values that are frequently used in the application, they are auto, hidden, scroll, visible.

What is Overflow in CSS?

Overflow is the property in CSS (Cascading Style Sheets). Which is used to fit the content properly from overflowing when the content is too big to fit within the specified area. Overflow property has 4 values, which are used always in our application. They are

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

1. Scroll

It adds a scroll bar to the extra content of the element.

Code:

div
{
overflow: scroll;
}

2. Hidden

It specified a portion of the content only and the rest of the content will hidden.

Code

div
{
overflow: hidden;
}

3. Auto

This auto value is automatically giving scrollbar if content is not fit within the width.

Code:

div
{
overflow: auto;
}

4. Visible

This visible is the default value for overflow property. Which works the same as a scroll.

Code:

div
{
overflow: visible;
}

Examples

Below are examples to implement:

1. Overflow with scroll value

HTML Code:

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Visible Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>

CSS Code:

h1 {
color: brown;
text-align: center;
}
h2
{
color: brown;
}
.visible {
overflow: scroll;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: blue;
font-size: 18px;
}
.content
{
color: green;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: blue;
font-size: 18px;
}

Output:

CSS Overflow

2. Overflow with the hidden value

HTML Code:

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Hidden Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>

CSS Code:

h1 {
color: red;
text-align: center;
}
h2
{
color: red;
}
.visible {
overflow: hidden;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: fuchsia;
font-size: 18px;
}
.content
{
color: green;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: fuchsia;
font-size: 18px;
}

Output:

CSS Overflow - 1

3. Overflow with auto value

HTML Code:

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Auto Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>

CSS Code:

h1 {
color: olive;
text-align: center;
}
h2
{
color: olive;
}
.visible {
overflow: auto;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: lime;
font-size: 18px;
}
.content
{
color: blue;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: lime;
font-size: 18px;
}

Output:

auto value

4. Overflow with visible value

HTML Code:

<!DOCTYPE html>
<html>
<meta charset="ISO-8859-1">
<title>Visible Overflow</title>
<!-- including CSS file -->
<link rel="stylesheet" href="VisibleOverflow.css">
<head>
</head>
<body>
<h1>Content of the Page</h1>
<p class="content">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.</p>
<p class="content">I have learned some courses from EDUCBA website. We can learn
any technologies from this websites within little amount of time. It
offer varies technologies like Machine learning, CSS, HTML, Python
etc. We have so many lecturers are there to guide us from starting to
ending.</p>
<h2>Auto Overflow Demo</h2>
<div class="visible">Executed and contributed to full-stack web development projects, with an emphasis on front end features, browser manipulation, and cross-browser compatibility. Wrote templates and front-end code for ECM app to meet WebTop application compatibility.Ihave learned some courses from EDUCBA website. We can learn anytechnologies from this websites within little amount of time. It offervaries technologies without any fee as a festival offer. Wehave so many lecturers are there to guide us from starting to ending.</div>
</body>
</html>

CSS Code:

h1 {
color: orange;
text-align: center;
}
h2
{
color: orange;
}
.visible {
overflow: visible;
background-color: gray;
width: 600px;
height: 100px;
border-style: solid;
border-width: 2px;
border-color: maroon;
font-size: 18px;
}
.content
{
color: blue;
text-align: justify;
border-style: solid;
border-width: 2px;
border-color: maroon;
font-size: 18px;
}

Output:

visible value

Conclusion

This property is used to handle overflow content with hidden, auto, visible and scroll values.

Recommended Articles

This is a guide to CSS Overflow. Here we discuss an introduction, what is Overflow in CSS, and examples to implement with CSS and HTML codes. You can also go through our other related articles to learn more –

  1. CSS Color Codes
  2. CSS Lists
  3. CSS z-index
  4. CSS Color Chart
0 Shares
Share
Tweet
Share
quiz