What is overflow and how to use it

• Bloggen
• >
• CSS tutorials
• >
• 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