Let's consider how we can control the content overflow with the help of one property. Sometimes happens that we have the fixed width and height of the element. However, the inner content is much bigger than the available space. The overflow property controls the behavior of an element's content when it exceeds the height or width values explicitly set for the element.

overflow: visible | scroll | hidden | auto

• visible - is the default value. The content overflows the element borders and stays visible;
• scroll - The content overflows the element borders, and the scrollbar appears that allows a user to scroll both vertically and horizontally;
• hidden - The content that overflows the element borders size is cut and not visible;
• auto - works the same as scroll. However, the scrollbars appear only when the content overflows the element borders.

Note

The overflowing content does not affect the other elements' geometry.

visible

If the overflow property is not set, its default value is visible. It means that the content will be displayed outside the element's borders. In the example, the box's borders are highlighted in darkblue, and the box has fixed width and height properties.

scroll

We can see the full element content using a scroll. Let's check the example:

hidden

All overflow content will be hidden, and a user will never see it. Generally, it is helpful only when we need to develop some decorative effects.