In this chapter, you will learn what happens when the content inside an element is too large for the available space. CSS provides the overflow property to control what happens in this situation. Let’s understand the different CSS overflow values step by step.
What is CSS Overflow?
CSS Overflow happens when the content inside an element does not fit within its set width or height. For example, imagine a box with a fixed height. If there is too much text inside it, the content may go outside the box. The overflow property helps you control what happens to that extra content.
The most commonly used values are:
visiblehiddenscrollauto
1. Overflow: Visible
The default value of the overflow property is visible. This means that extra content can appear outside the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow Visible</title>
<style>
.box {
width: 300px;
height: 80px;
background-color: lightblue;
border: 2px solid blue;
overflow: visible;
}
</style>
</head>
<body>
<div class="box">
This is a box with a fixed height. If the content is too large
to fit inside the box, it will continue outside the box because
the overflow value is set to visible.
</div>
</body>
</html>
The extra text will continue outside the box. Since visible is the default value, you usually do not need to write it unless you specifically want to make it clear in your CSS.
2. Overflow: Hidden
The hidden value hides any content that goes outside the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow Hidden</title>
<style>
.box {
width: 300px;
height: 80px;
background-color: lightgreen;
border: 2px solid green;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
This is a box with a fixed height. The extra content will be hidden
if it does not fit inside the available space.
</div>
</body>
</html>
The content that does not fit inside the box will not be visible. Be careful when using hidden because users may not be able to see the hidden content.
3. Overflow: Scroll
The scroll value adds scrollbars to an element. This allows the user to scroll and see the extra content.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow Scroll</title>
<style>
.box {
width: 300px;
height: 100px;
background-color: lightyellow;
border: 2px solid orange;
overflow: scroll;
}
</style>
</head>
<body>
<div class="box">
This box has a fixed height and width. If there is more content
than the available space, you can use the scrollbar to view it.
Keep scrolling to read the remaining content inside this box.
</div>
</body>
</html>
You will see a scrollbar inside the box. The scrollbar allows you to move through the hidden content.
4. Overflow: Auto
The auto value adds a scrollbar only when it is needed.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow Auto</title>
<style>
.box {
width: 300px;
height: 100px;
background-color: lightpink;
border: 2px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
This box uses overflow auto. A scrollbar will appear only when
the content is larger than the available space. If all the content
fits inside the box, no scrollbar is needed.
</div>
</body>
</html>
The auto value is useful because it keeps the element clean when a scrollbar is not needed.
Overflow on One Direction
You can also control horizontal and vertical overflow separately. CSS provides:
overflow-x
overflow-yHorizontal Overflow
The overflow-x property controls content that overflows horizontally. For example:
.box {
overflow-x: scroll;
}
Vertical Overflow
The overflow-y property controls content that overflows vertically. For example:
.box {
overflow-y: scroll;
}
This is useful when you want to control scrolling in only one direction.
A Simple Example with Vertical Scrolling
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scroll</title>
<style>
.box {
width: 300px;
height: 120px;
background-color: lightblue;
border: 2px solid blue;
padding: 10px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="box">
<p>HTML is used to create the structure of a web page.</p>
<p>CSS is used to style and design the web page.</p>
<p>JavaScript is used to add interactivity to a web page.</p>
<p>Keep scrolling to see all the content inside this box.</p>
</div>
</body>
</html>
When the content becomes larger than the available height, you can scroll vertically inside the box.
Quick Recap
- Overflow happens when content does not fit inside an element.
visibleallows content to appear outside the element.hiddenhides extra content.scrolladds scrollbars.autoadds scrollbars only when needed.overflow-xcontrols horizontal overflow.overflow-ycontrols vertical overflow.
Mini Quiz
Mini Project
Mini Project: Student Notice Board
Question:
Create a Student Notice Board for a school or learning website. The notice board should display important announcements inside a limited space, with different sections showing how extra content can be handled.
Requirements
- Create a notice board with a fixed width and height.
- Add several announcements so that some sections contain more content than the available space.
- Create one section where extra content remains visible outside its box.
- Create another section where extra content is completely hidden.
- Add a section where students can scroll through the remaining announcements.
- Create a notice area where a scrollbar appears only when the content needs it.
- Add a separate announcement section where students can scroll vertically through a longer list of notices.
View Answer Code
<!DOCTYPE html>
<html>
<head>
<title>Student Notice Board</title>
<style>
.board {
width: 700px;
margin: 20px auto;
}
.notice {
width: 300px;
height: 100px;
padding: 10px;
margin: 20px;
border: 2px solid blue;
background-color: lightblue;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.vertical {
height: 120px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="board">
<h1>Student Notice Board</h1>
<div class="notice visible">
<h3>Upcoming Workshop</h3>
<p>
A web development workshop will be held this Saturday.
Bring your notebook and complete the registration before Friday.
</p>
</div>
<div class="notice hidden">
<h3>Exam Reminder</h3>
<p>
The final examination schedule has been released. Students should
check all subjects, timings, room numbers, instructions and other
important examination details before attending the exam.
</p>
</div>
<div class="notice scroll">
<h3>Important Announcements</h3>
<p>Project submission deadline is Monday.</p>
<p>New computer lab timings start next week.</p>
<p>Bring your student ID card to class.</p>
<p>Check the notice board regularly for updates.</p>
<p>Contact the instructor for project-related questions.</p>
</div>
<div class="notice auto">
<h3>Course Updates</h3>
<p>HTML practice session is available today.</p>
<p>CSS assignment has been updated.</p>
</div>
<div class="notice vertical">
<h3>Daily Notices</h3>
<p>Monday: HTML Practice</p>
<p>Tuesday: CSS Practice</p>
<p>Wednesday: JavaScript Session</p>
<p>Thursday: Project Work</p>
<p>Friday: Quiz and Revision</p>
<p>Saturday: Doubt Clearing Session</p>
<p>Sunday: No Classes</p>
</div>
</div>
</body>
</html>
Frequently Asked Questions (FAQs)
Q1. What is CSS Overflow?
CSS Overflow controls what happens when content inside an HTML element is larger than the available space.
Q2. What are the different values of the CSS overflow property?
The most common values are visible, hidden, scroll, and auto.
Q3. What does overflow hidden do in CSS?
overflow: hidden hides any content that extends outside the boundaries of an element.
Q4. What is the difference between overflow scroll and auto in CSS?
overflow: scroll adds scrollbars, while overflow: auto adds scrollbars only when the content does not fit inside the available space.
Q5. How do I add a scrollbar using CSS overflow?
You can use the CSS overflow property to allow scrolling when content is larger than the width or height of an element.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
