CSS overflow Property

Posted in CSS Tutorial

Updated on Sep 04, 2024

By Mari Selvan

👁️ 122 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The overflow property in CSS controls how content that overflows the bounds of its container is handled.

This property is crucial for managing content that exceeds the dimensions of its container, allowing you to specify how to handle overflowed content in a way that fits your design needs.

💡 Syntax

The syntax for the overflow property is as follows:

Syntax

Copied

element {
  overflow: value;
}

Here, value can be one of the defined keywords or a combination of values.

🎛️ Default Value

The default value of the overflow property is visible, meaning that content overflowing the bounds of the container will be rendered outside the container.

🏠 Property Values

Value	Description
visible	The overflowed content is visible outside the container. This is the default value.
hidden	The overflowed content is clipped, and no scrollbars are provided. The content that overflows is not visible.
scroll	Scrollbars are added to the container, allowing users to scroll and view the overflowed content. Scrollbars will appear even if the content does not overflow.
auto	Scrollbars are added only when necessary. If the content overflows, scrollbars will appear; otherwise, they will not.

📄 Example

In this example, we will use the overflow property to manage overflowed content within a div element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS overflow Example</title>
  <style>
    .container {
      width: 200px;
      height: 100px;
      border: 1px solid black;
      overflow: auto;
    }
  </style>
</head>
<body>
  <h1>Container with Overflow</h1>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum. Integer venenatis dolor ac eros elementum, vel elementum mauris dignissim. Nulla facilisi. Sed lacinia orci vel augue vehicula, nec cursus nunc feugiat.</p>
  </div>
</body>
</html>

In this example, the container has a fixed width and height, and the overflow: auto property ensures that scrollbars will appear if the content exceeds the container's dimensions.

🖥️ Browser Compatibility

The overflow property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This makes it a reliable option for managing content overflow in various web environments.

🎉 Conclusion

The overflow property is an essential tool for managing how content that exceeds the bounds of its container is handled.

By choosing the appropriate value—whether it's visible, hidden, scroll, or auto—you can control how users interact with overflowing content and maintain a clean and functional design for your web pages. Experiment with different values to find the best fit for your layout and design requirements.