CSS Overflow
The overflow property in CSS decides what happens when the content inside a box is too big to fit. You can choose to hide the extra content, show scrollbars to view it, or let it overflow outside the box. This helps in managing how content looks when it’s too large for its container.
Common overflow Values
1. overflow: visible;
This is the default value. The content is not clipped and will overflow outside the container’s bounds if it’s too large. The overflowing content will still be visible.
Example:
Output:
In this example:
• width: 120px;: Sets the width of the <div> to 120 pixels.
• height: 70px;: Sets the height of the <div> to 70 pixels.
• overflow: visible;: This property controls what happens to content that overflows the element’s box. With visible, the overflowed content will be visible outside the element’s boundaries.
2. overflow: hidden;
The content that exceeds the container’s bounds is clipped, meaning it will be hidden and not visible outside the container.
Example:
<head>
<style>
.overflow-hidden {
width: 120px;
height: 70px;
overflow: hidden;
border: 2px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<div class=”overflow-hidden”>
This is a long content that will be clipped and hidden if it overflows the container.
</div>
</body>
Output:
In this example:
• width: 120px;: Sets the width of the <div> to 120 pixels.
• height: 70px;: Sets the height of the <div> to 70 pixels.
• overflow: hidden;: Controls what happens to content that overflows the element’s box. With hidden, any content that exceeds the dimensions of the <div> will be clipped and not visible outside the box.
3. overflow: scroll;
This value forces scrollbars to appear, whether or not the content overflows. Both horizontal and vertical scrollbars are added.
Example:
<head>
<style>
.overflow-scroll {
width: 120px;
height: 70px;
overflow: scroll;
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class=”overflow-scroll”>
This is a long content that will always show scrollbars, even if it fits inside the container.
</div>
</body>
Output:
In this example:
• width: 120px;: Sets the width of the <div> to 120 pixels.
• height: 70px;: Sets the height of the <div> to 70 pixels.
• overflow: scroll;: This property controls the behavior of overflowed content. With scroll, scrollbars will always be visible, even if the content fits inside the container. This allows users to scroll through the content if it exceeds the dimensions of the <div>.
4. overflow: auto;
Scrollbars appear only if the content overflows the container. If the content fits, no scrollbars are shown.
Example:
<head>
<style>
.overflow-auto {
width: 120px;
height: 70px;
overflow: auto;
border: 2px solid black;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class=”overflow-auto”>
This is a long content that will show scrollbars only when it overflows the container.
</div>
</body>
Output:
In this example:
• width: 120px;: Sets the width of the <div> to 120 pixels.
• height: 70px;: Sets the height of the <div> to 70 pixels.
• overflow: auto;: This property controls how content that overflows the element’s box is handled. With auto, scrollbars will appear only if the content overflows the dimensions of the <div>. If the content fits inside, no scrollbars will be shown.
Overflow with Overflow-X and Overflow-Y
You can also control overflow behavior separately for the horizontal (overflow-x) and vertical (overflow-y) directions.
Example:
<head>
<style>
.overflow-x-y {
width: 120px;
height: 70px;
overflow-x: auto; /* Horizontal overflow with scrollbars if needed */
overflow-y: hidden; /* Vertical overflow will be hidden */
border: 2px solid black;
background-color: lightpink;
}
</style>
</head>
<body>
<div class=”overflow-x-y”>
This content will have horizontal scrollbars if it overflows the container width, but vertical overflow will be clipped.
</div>
</body>
Output:
In this example:
• width: 120px;: Sets the width of the <div> to 120 pixels.
• height: 70px;: Sets the height of the <div> to 70 pixels.
• overflow-x: auto;: Controls the horizontal overflow. If the content exceeds the width of the <div>, horizontal scrollbars will appear, allowing users to scroll horizontally.
• overflow-y: hidden;: Controls the vertical overflow. Any content that exceeds the height of the <div> will be clipped and not visible, with no vertical scrollbars.
Using overflow in Layouts
The overflow property is especially useful in layouts where content may vary in size, like text boxes, images, or dynamic content areas. Properly managing overflow can improve the user experience by ensuring that your layout remains functional and visually appealing, even with varying content sizes.
Example:
<head>
<style>
.container {
width: 300px;
height: 150px;
border: 2px solid black;
overflow: hidden; /* Clips overflowed content */
}
.content {
width: 500px; /* Wider than the container */
height: 200px; /* Taller than the container */
background-color: lightblue;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”content”>
This content is wider and taller than the container, and it will be clipped because of the overflow: hidden property.
</div>
</div>
</body>
Output:
In this example:
.container:
• width: 300px;: Sets the width of the <div> with the class container to 300 pixels.
• height: 150px;: Sets the height of the <div> with the class container to 150 pixels.
• overflow: hidden;: Clips any content that exceeds the dimensions of the <div>. This means any overflowed content will be cut off and not visible outside the container.
.content:
• width: 500px;: Sets the width of the <div> with the class content to 500 pixels. This makes it wider than its parent container.
• height: 200px;: Sets the height of the <div> with the class content to 200 pixels. This makes it taller than its parent container.
Conclusion
The overflow property is an essential tool for managing how content behaves when it exceeds the container’s boundaries. Whether you want to clip the content, add scrollbars, or allow it to overflow freely, understanding overflow helps you create flexible and user-friendly designs.
Course Video
Course Video
1) CSS Overflow in Hindi/Urdu
Practice Scenarios
Scenario 1: Overflow visible
Objective: Content that overflows the container should be visible.
Expected Output: Content that exceeds the container’s dimensions will be visible outside the container.
Output:
Scenario 2: Overflow hidden
Objective: Hide content that overflows the container.
Expected Output: Content exceeding the container’s bounds will be clipped and invisible.
Output:
Scenario 3: Overflow scroll
Objective: Add scrollbars to the container when content overflows.
Expected Output: Scrollbars will appear on the container when the content exceeds dimensions.
Output:
Scenario 4: Overflow auto
Objective: Add scrollbars only when needed.
Expected Output: Scrollbars will appear only if the content overflows the container.
Output:
Scenario 5: Overflow with Both overflow-x and overflow-y
Objective: Control overflow behavior separately for horizontal and vertical axes.
Expected Output: You can specify different overflow behaviors for the horizontal and vertical axes.
Output:
