CSS Overflow

What is CSS Overflow?

The CSS overflow property controls what happens when the content inside an HTML element becomes larger than its width or height. You can allow the content to remain visible, hide it, add scrollbars, or automatically show scrollbars only when needed. The overflow property is commonly used in cards, containers, code editors, tables, image galleries, and responsive layouts.

Why Use CSS Overflow?

Without the overflow property, content may extend outside its container and break the webpage layout. Using overflow helps keep layouts clean, improves readability, and provides a better user experience by controlling how extra content is displayed.

Common Overflow Values

visible

Default value.

Content is displayed outside the element.

hidden

Extra content is hidden.

No scrollbars are shown.

scroll

Always displays scrollbars.

User can scroll the content.

auto

Shows scrollbars only when needed.

Responsive scrolling.

Basic Overflow Syntax

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    width:250px;

    height:120px;

    overflow:auto;

}

</style>

</head>

<body>

<div class="box">

Overflow Example

</div>

</body>

</html>

Step 1: Using overflow: visible

The default value is visible. Content that is larger than the container is displayed outside the element.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    width:220px;

    height:100px;

    overflow:visible;

    border:2px solid #007BFF;

    padding:10px;

}

</style>

</head>

<body>

<div class="box">

This is a very long paragraph that extends outside the container because the
overflow property is set to visible.

</div>

</body>

</html>

Step 2: Using overflow: hidden

The hidden value clips the extra content so that anything outside the container is not visible.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    width:220px;

    height:100px;

    overflow:hidden;

    border:2px solid #28a745;

    padding:10px;

}

</style>

</head>

<body>

<div class="box">

This content is longer than the container, but the extra text is hidden because
overflow is set to hidden.

</div>

</body>

</html>

Step 3: Using overflow: scroll

The scroll value always displays horizontal and vertical scrollbars, even when they are not required.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    width:220px;

    height:120px;

    overflow:scroll;

    border:2px solid #dc3545;

    padding:10px;

}

</style>

</head>

<body>

<div class="box">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt,
ligula sed commodo tincidunt, turpis felis vulputate tortor, eget laoreet
lectus neque vitae nunc.

</div>

</body>

</html>

Step 4: Using overflow: auto

The auto value adds scrollbars only when the content is larger than the container.

<!DOCTYPE html>
<html>

<head>

<style>

.box{

    width:220px;

    height:120px;

    overflow:auto;

    border:2px solid #ff9800;

    padding:10px;

}

</style>

</head>

<body>

<div class="box">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.

</div>

</body>

</html>

Step 5: Horizontal Scrolling

Horizontal scrolling is useful for displaying long lines of code or wide tables without breaking the layout.

<!DOCTYPE html>
<html>

<head>

<style>

.code{

    width:300px;

    overflow-x:auto;

    white-space:nowrap;

    border:2px solid #007BFF;

    padding:10px;

}

</style>

</head>

<body>

<div class="code">

This_is_a_very_long_line_of_text_that_requires_horizontal_scrolling_to_be_viewed_completely.

</div>

</body>

</html>

Complete CSS Overflow Example

<!DOCTYPE html>
<html>

<head>

<style>

body{

    font-family:Arial;

}

.card{

    width:320px;

    height:180px;

    overflow:auto;

    border:2px solid #007BFF;

    padding:15px;

    background:#f5f9ff;

}

</style>

</head>

<body>

<div class="card">

<h3>Article</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</div>

</body>

</html>

Advantages of CSS Overflow

Clean Layout

Better Appearance

Prevents content from breaking the page layout.

Scrollable Content

Easy Navigation

Allows users to scroll through long content.

Responsive Design

Works on All Devices

Keeps content inside its container.

Useful for Code

Developer Friendly

Displays long code lines without wrapping.

Best Practices

Use overflow:auto for responsive containers.
Use overflow:hidden only when hidden content is acceptable.
Use overflow-x:auto for wide tables and code blocks.
Specify a width or height when using overflow.
Avoid unnecessary scrollbars by choosing the correct overflow value.
Test scrolling behavior on desktop and mobile devices.
Keep scrollable areas easy to access.
Combine Overflow with Max-Width and Position for responsive layouts.

Web Resources on CSS Overflow

1. MDN Web Docs : overflow CSS property
2. MDN Web Docs : overflow-y CSS property
3. Web.dev : Overflow
4. CSS Reference.io : overflow, CSS Reference

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.