Overflow Property

The CSS overflow property is used to control what happens when content overflows its containing element's box. It's particularly useful when dealing with elements that have a fixed size and might contain content larger than that size. The property can take several values: visible, hidden, scroll, and auto. Let's delve into each of these values with examples to understand their behavior better.

1. overflow: visible;

When overflow is set to visible, content is allowed to overflow the containing element without any clipping. This is the default behavior.

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: visible;
}

2. overflow: hidden;

With overflow: hidden;, any content that exceeds the dimensions of the container is clipped and hidden from view.

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
}

3. overflow: scroll;

Using overflow: scroll;, a scrollbar will be added to the container, regardless of whether the content overflows or not. This ensures that users can always access the content, even if it's larger than the container.

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: scroll;
}

4. overflow: auto;

overflow: auto; automatically adds a scrollbar when the content overflows the container. If the content fits within the container, no scrollbar is shown.

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  overflow: auto;
}

Example HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Property Examples</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nisi ut ipsum malesuada fringilla. Sed sit amet magna quis metus tincidunt feugiat.</p>
  </div>
</body>
</html>

Conclusion:

Understanding how to use the overflow property is crucial for managing the layout and presentation of your web content. Whether you need to hide overflowing content, provide scrollbars for navigation, or let content flow naturally, overflow offers the necessary flexibility to achieve your design goals.

PreviousPosition PropertyNextBox-shadow

Last updated