The CSS overflow property is used to control what happens when the content of an element overflows its
designated container in terms of width and height. It determines how the overflowed content is displayed
or whether scrollbars should appear.
The overflow property can take several values:
- visible (default):
- hidden
- scroll
- auto
visible (default):
This is the default value. Content that overflows its container will be visible outside the container's
boundaries. It may overlap other content on the page.
Example:
<html>
<head>
<style>
.con {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: visible;
}
.over {
width: 300px;
height: 100px;
background-color: lightblue;
position: relative;
left: 50px;
top: -20px;
}
</style>
</head>
<body>
<div class="con">
<div class="over">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto magnam molestias placeat, soluta ut
iste mollitia, facere quam commodi fugiat, a totam provident maxime vero quasi hic pariatur sed nemo
cupiditate! Pariatur totam tempore et veniam tenetur consectetur beatae reiciendis accusantium!
</div>
</div>
</body>
</html>
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto magnam molestias placeat, soluta
ut iste mollitia, facere quam commodi fugiat, a totam provident maxime vero quasi hic pariatur sed
nemo cupiditate! Pariatur totam tempore et veniam tenetur consectetur beatae reiciendis accusantium!
hidden:
Content that overflows the container will be clipped and hidden. It will not be visible or accessible
to
the user.
Example:
<html>
<head>
<style>
.abc {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: hidden;
}
.xyz {
width: 300px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="abc">
<div class="xyz">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto magnam molestias placeat, soluta ut
iste mollitia, facere quam commodi fugiat, a totam provident maxime vero quasi hic pariatur sed nemo
cupiditate! Pariatur totam tempore et veniam tenetur consectetur beatae reiciendis accusantium!
</div>
</div>
</body>
</html>
Output:
This content overflows the container but is hidden due to overflow: hidden.
scroll:
Scrollbars (both horizontal and vertical) will be added to the container, allowing the user to scroll
to see the hidden content. Scrollbars will always be visible, even if there's no content to scroll.
Example:
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: scroll;
}
.overflowing-content {
width: 300px;
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<div class="overflowing-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto magnam molestias placeat, soluta ut
iste mollitia, facere quam commodi fugiat, a totam provident maxime vero quasi hic pariatur sed nemo
cupiditate! Pariatur totam tempore et veniam tenetur consectetur beatae reiciendis accusantium! </div>
</div>
</body>
</html>
Output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto magnam molestias placeat, soluta ut
iste mollitia, facere quam commodi fugiat, a totam provident maxime vero quasi hic pariatur sed nemo
cupiditate! Pariatur totam tempore et veniam tenetur consectetur beatae reiciendis accusantium!
auto:Scrollbars will appear only when the content overflows the container. If there's no overflow, no scrollbars are displayed.
Example:
<html>
<head>
<style>
.cont {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
.overf {
width: 300px;
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="cont">
<div class="overf">
This content overflows the container, and scrollbars are added when needed.
</div>
</div>
</body>
</html>
Output:
This content overflows the container, and scrollbars are added when needed.
