Understanding CSS Overflow: Visible, Hidden, Scroll and Auto

This explains on what CSS overflow property specifies and how to use it.

The overflow property in CSS defines whether to clip the content or add scrollbars when the content is too big to fit the specified area. This property would be useful to make sure what would happen to the content if it overflows the height or width of an element’s box.

The overflow property can be set to the following values:

1. Visible
2. Hidden
3. Scroll
4. Auto

1. Overflow: Visible

This is the default value for overflow property. The overflow is visible. Meaning that the text or element is not clipped if it overflows the content’s box.

Let’s see how it looks like. Here are the html and css code I use to test this property.

HTML

<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

CSS

.overflow-visible {…