DEV Community

CSS Overflow Guides

CSS Overflow will determine whether content clips or scrolls, etc. It's important to get right when you're not sure the size of the content you're dealing with.

This is a collection of top and trending guides written by the community on subjects related to CSS Overflow concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.

The Guide to CSS Overflow Property

The CSS overflow property specifies what to do in the case a content is too large to fit in the container box. It specifies if a scrollbar should appear, or if a content gets clipped.

CSS: Overscroll, Overflow & Touch Actions. ⛷

Alright then, now it's time to know more about what is overscroll, how overflow can help and why do you even need something like touch actions!

How to avoid overflow behavior on translated elements

When trying to skew the justified elements, they are forced to overflow because i.e. the visual rendering of the translated element does not affect the normal document flow.

Two(2) ways to prevent padding from causing an overflow in CSS

Using box-sizing is the best way of tackling the issue of an overflow caused by padding.

The box-sizing property will allow us to define how the width and height of an element are calculated. The default value of the box-sizing property is content-box, but when we set it to border-box this will make the element’s padding and border to also be included in its width and height.

Meaning if we set the element as a width/height of 10px and add padding or a border of 2px, the element’s actual width/height will still be 10px except the padding + border is greater than 10px

Say Goodbye to Pesky Overflowing Text With the text-overflow CSS Property

You can use the text-overflow + overflow CSS properties to deal with long strings that break your UI.

How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working

If your sticky sidebar, header, or footer CTAs stopped working, there's a good chance that your theme added the CSS overflow property to a parent element (usually a div).

Understanding overflow in CSS

If you have written CSS for a while, you'd probably encountered overflow property. It governs the display of overflow content in a container.

CSS Tip - Perfect Flexbox overflow items

The overflow elements - Depending on the size of our page and the size of the elements in our list, we can have a variable number of items that "overflow" at the end of the list. How do we tackle this? Do we want them to be right justified? Do we want to hardcode some styles for each situation: if 1 item, width 100%, if 2 items width 50%, etc etc?

How to Prevent Overflow Scroll in CSS

In this short guide, we'll go over the CSS overflow property and I'll show you how to prevent a scroll bar from appearing anywhere around your container element even when content flows beyond it.

Happy CSS Overflow coding!