Overflow

CSS Overflow is a flexible CSS property that allows us to assign scroll bars to content and visibly hide elements outside of fixed widths. This is useful for sliders, embed-able feeds of content, and neat parallax effects.

By default, our elements naturally expand to the heights of all nested elements. The .content-container element here is centered at the screen with a maximum width of the image. It's got a big red border around it and surrounds both the content and the image inside.

If we want the container to only take up the height of the image, we can set a fixed height on the .content-container. This doesn't quite work, .content-container element's height is 332px, but the paragraph inside breaks outside of that height.

Now that we have a fixed height on the .content-container but, the content of the container is overflowing we can control the display of this overflowing content.

Overflow: hidden

To hide the overflowing content, or any other content below our fixed height, we can set the css overflow property to hidden. overflow: hidden;

Overflow: Scroll

We can set scroll bars for the overflowing content. This is a helpful technique for limited space.

Overflow-y: scroll

Even though the width of the content fits inside our .content-container element a disabled scroll bar is attached for left and right. The overflow: scroll style assigns scroll bars to both top and bottom and left and right. We can specifically set a scroll-bar to only the top and bottom.

Overflow-x: scroll

Vice versa to the top/bottom scroll bar with overflow-y, we can set a scroll bar and for left/right. In this example we've assembled a variety of slides inside a content-container and we can scroll left and right between the elements.

Example: Overflow with Position

In this example we are using position to move the grey box out of the containing element and then brining it back in the containing element on hover. CSS Transition property is used for smooth transition of the position left value.