Home 〉 CSS Tutorials 〉 CSS Overflow Property Explained with Examples | Control Overflow in CSS

CSS Overflow Property Explained with Examples | Control Overflow in CSS !

CSS Overflow Property Explained with Examples | Control Overflow in CSS !

Ever had content spill outside its container? The `overflow` property lets you handle that using values like `visible`, `hidden`, `scroll`, and `auto`. This is key for scrollable boxes, tooltips, and responsive designs. Learn how to use overflow with fixed-height containers.

Introduction

In CSS, the overflow property is used to control how content that overflows an element's box is handled. This is especially useful when dealing with elements that contain more content than can fit within their specified height or width.

Let's explore the 'overflow' property in CSS and see how to handle overflowing content effectively!

Why Use the Overflow Property?

  • Manage Overflowing Content: Prevent content from spilling out of its container.
  • Maintain Layout Integrity: Control how elements behave when content exceeds their boundaries.
  • Create Scrollable Areas: Use 'scroll' or 'auto' for user-friendly navigation within limited areas.

Syntax of the CSS Overflow Property

The 'overflow' property is written as:

Syntax ✍

selector {
overflow: visible | hidden | scroll | auto;
}

Available Values:

  • 'visible': Default value. Content overflows the container and is visible outside the box.
  • 'hidden': Content is clipped and will not be visible outside the container.
  • 'scroll': Adds scrollbars to the element if content overflows, whether it's needed or not.
  • 'auto': Adds scrollbars only when the content overflows the element's box.

Examples of CSS Overflow Property

1. 'overflow: visible'

By default, content will overflow outside the container if it's too large.

Code : 1 📝

<!DOCTYPE html>
<html>
<body>

<div style="overflow: visible; width: 200px; height: 100px; border: 1px solid black;">
<p>This is a large content that overflows outside the container. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?</p>
</div>

</body>
</html>

output 📌

This is a large content that overflows outside the container. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The paragraph text will overflow and be visible outside the container.

2. 'overflow: hidden'

Clips the overflowing content, hiding it from view while maintaining the element's dimensions.

Code : 2 📝

<!DOCTYPE html>
<html>
<body>

<div style="overflow: hidden; width: 200px; height: 100px; border: 1px solid black;">
<p>This content is hidden when it overflows. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?</p>
</div>

</body>
</html>

output 📌

This content is hidden when it overflows. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The content will be clipped and anything that exceeds the container's boundaries will not be visible.

3. 'overflow: scroll'

Displays scrollbars whether the content overflows or not, allowing users to scroll through the content.

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<div style="overflow: scroll; width: 200px; height: 100px; border: 1px solid black;">
<p>This is a long content that will overflow and show scrollbars. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?</p>
</div>

</body>
</html>

output 📌

This is a long content that will overflow and show scrollbars. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: The element will have scrollbars, even if the content doesn't overflow. Users can scroll to see the content.

4. 'overflow: auto'

Shows scrollbars only when the content overflows.

Code : 4 📝

<!DOCTYPE html>
<html>
<body>

<div style="overflow: auto; width: 200px; height: 100px; border: 1px solid black;">
<p>This is a large content that will only show scrollbars when necessary. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?</p>
</div>

</body>
</html>

output 📌

This is a large content that will only show scrollbars when necessary. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis, praesentium? At autem, qui mollitia animi doloremque repellendus vel cumque id? Eveniet autem ut, obcaecati excepturi architecto ratione cumque repudiandae ab?

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Output: Scrollbars will appear only if the content overflows.

Practical Uses of Overflow

  • Creating Scrollable Containers: Use 'overflow: scroll' or 'auto' for elements like sidebars, chat boxes, and modals.
  • Fixing Layout Issues: Use 'overflow: hidden' to clear floats and prevent elements from breaking the layout.
  • Controlling Large Images and Text: Ensure content stays within bounds and doesn't overflow outside containers by using 'overflow: hidden'.

When Not to Use Overflow

  • Avoid using overflow in certain layouts that need to be responsive. Fixed scrollbars might not work well in mobile designs.
  • Don't use 'overflow: hidden' if you need to show the overflowing content, like images in a gallery, as it may hide important data.

Conclusion

The CSS overflow property is an essential tool for controlling the flow of content inside elements. Whether you need to hide content, add scrollbars, or allow content to overflow, this property gives you flexibility in designing layouts that adapt to various content types.

  • Use 'overflow: hidden' to clip and hide content.
  • Use 'overflow: scroll' or 'overflow: auto' to allow scrolling.
  • Use 'overflow: visible' to let content overflow outside its container.

Mastering the 'overflow' property will allow you to create better, more controlled layouts for your web projects.

Suggested Posts:

Related Topics:

  • CSS Visibility Property Explained with Examples | Learn How Visibility Works in CSS
  • CSS max-width, min-width, max-height, min-height Properties Explained | Control Element Dimensions
  • CSS Display Property Explained with Examples | Block, Inline, Flex, Grid
    •

    Frequently Asked Questions (FAQs)

    What's the difference between 'overflow: scroll' and 'overflow: auto'?

    'overflow: scroll' always shows scrollbars, even when they're not needed. 'overflow: auto' only shows scrollbars when the content exceeds the container's boundaries.

    Can I use 'overflow' with flexbox and grid layouts?

    Yes, 'overflow' works with both flexbox and grid containers. You can use it to manage overflow within flexible or grid-based layouts.

    Does 'overflow: hidden' affect all content within a container?

    Yes, 'overflow: hidden' will clip any content that exceeds the container's bounds, including text, images, and other elements.

    Can I animate the overflow property?

    No, the 'overflow' property itself cannot be directly animated. However, you can animate the size of an element, which may result in overflow behavior.

    Is 'overflow: hidden' useful for clearing floats?

    Yes, 'overflow: hidden' can be used to clear floats, preventing floated elements from affecting the layout of subsequent elements.

    Previous Post Next Post