What is overflow and how to use it

Overflow is a CSS property that controls how content is displayed when it exceeds the size of an element. It is used to avoid content getting cut off or overlapping with other elements.

Syntax

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

The values for the overflow property are:

  • visible: Default value. Content overflows the element.
  • hidden: Content that exceeds the element’s dimensions is hidden.
  • scroll: Adds a scrollbar to the element to scroll through the content that exceeds the element’s dimensions.
  • auto: Adds scrollbar only if necessary.

Here are some examples of how to use the overflow property in HTML with CSS:

Example 1: Hidden Overflow

In this example, we have set the overflow property to hidden. The content exceeding the element’s dimensions will be hidden:

  <div style="width: 200px; height: 100px; overflow: hidden;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis elit ut ultricies rutrum. Aliquam laoreet quis ipsum non molestie. Aliquam euismod elit auctor sapien bibendum, a dapibus quam molestie. Pellentesque id elementum justo. Integer ullamcorper mi lectus, eget maximus tellus hendrerit nec. Integer condimentum mollis sem, id malesuada metus tristique in. Nam bibendum varius metus a pulvinar. Vestibulum rutrum leo quis magna bibendum, nec pharetra tortor ultrices. Sed pharetra massa erat, vel dignissim sem venenatis vitae. Maecenas fermentum nisl a ipsum vestibulum elementum. Cras eu turpis quis urna mollis dignissim eget vitae nulla. Nulla facilisi. Nullam blandit interdum neque, non interdum mauris congue vel.</p>
  </div>

Example 2: Scrollable Overflow

In this example, we have set the overflow property to scroll, which adds a scrollbar to the element so that users can scroll through the content exceeding the element’s dimensions:

  <div style="width: 200px; height: 100px; overflow: scroll;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis elit ut ultricies rutrum. Aliquam laoreet quis ipsum non molestie. Aliquam euismod elit auctor sapien bibendum, a dapibus quam molestie. Pellentesque id elementum justo. Integer ullamcorper mi lectus, eget maximus tellus hendrerit nec. Integer condimentum mollis sem, id malesuada metus tristique in. Nam bibendum varius metus a pulvinar. Vestibulum rutrum leo quis magna bibendum, nec pharetra tortor ultrices. Sed pharetra massa erat, vel dignissim sem venenatis vitae. Maecenas fermentum nisl a ipsum vestibulum elementum. Cras eu turpis quis urna mollis dignissim eget vitae nulla. Nulla facilisi. Nullam blandit interdum neque, non interdum mauris congue vel.</p>
  </div>

For more detailed information about the overflow property, refer to this MDN documentation.

  Written by: Steven Iversen     07-06-2023     Written in: CSS tutorials

6 Comments

  • Dawson says:

    I really lovd this aritcle on overflow . It explaind the concept vry clearly and gave good examples for how to use it in CSS. I’m a nmewbie to web design and this wsa vry helfpul in undrstanding how to handl overflow in my layouts. Thank you for sharing!

  • Jose says:

    Nice article! It’s really helpful to understand overlow and how to use it in CSS . I had trouble controlling the elements on my website, but now I know how to handle it better. Thank you for sharing these great tips!

  • Zoey says:

    This was so helpful! I’ve always struggled with understanding how to use the CSS overflow property properly, but this explanation really clarified things for me . Thank you!

  • Mila says:

    I always had trouble understanding CSS overflow, but this article made it so clear! Now I feel much more confident using it in my projects . Thanks for the great explanation!

  • Donovan says:

    I never knew about the ‘overflow’ property before, this article really helped me understand how to use it in my coding projects! 🙌

  • Willow says:

    I found this article to be lacking in depth and clarity on the topic of overflow . It would have been helpful to see more examples and practical applications of how to use overflow in different scenarios. Overall, I was left wanting more detailed information to truly grasp the concept.

Leave a Reply