CSS Layout – How to use Overflow

CSS Overflow is a property that controls what happens when the content of an element overflows its container. The CSS Overflow property specifies how to handle the content when it is too big to fit inside the specified dimensions of an element.

The CSS Overflow property can take on four possible values:

1. visible: This is the default value. It allows content to overflow its container, meaning that any content that exceeds the container dimensions will be visible outside the container.
2. hidden: This value hides any content that overflows the container. The content is clipped, and users cannot see any part of the content that exceeds the container dimensions.
3. scroll: This value adds scrollbars to the container when the content exceeds the container dimensions. Users can then scroll the content to view any content that exceeds the container dimensions.
4. auto: This value automatically adds scrollbars to the container when the content exceeds the container dimensions. If the content fits inside the container, then no scrollbars are added.

The CSS Overflow property is commonly used with elements like divs, paragraphs, and images. It is useful for controlling the layout of a page and ensuring that content does not break the layout or cause issues with other elements on the page.

Few complete examples of CSS Overflow

Here are a few complete examples of CSS Overflow and an explanation of how each one works:

Example 1 – Overflow: Visible

<div style="width: 200px; height: 200px; background-color: lightblue; overflow: visible;">
    <p style="font-size: 20px; padding: 10px;">This text is visible outside the container.</p>
</div>

In this example, we have a div element with a width and height of 200 pixels and a light blue background color. The Overflow property is set to Visible, which means that any content that exceeds the dimensions of the container will be visible outside the container. We have added a paragraph element inside the div with some text content and padding. As the text exceeds the dimensions of the container, it is visible outside the container.

Example 2 – Overflow: Hidden

<div style="width: 200px; height: 200px; background-color: lightblue; overflow: hidden;">
    <p style="font-size: 20px; padding: 10px;">This text is hidden if it overflows the container.</p>
</div>

In this example, we have a div element with a width and height of 200 pixels and a light blue background color. The Overflow property is set to Hidden, which means that any content that exceeds the dimensions of the container will be hidden. We have added a paragraph element inside the div with some text content and padding. As the text exceeds the dimensions of the container, it is clipped and hidden, and users cannot see any part of the content that exceeds the container dimensions.

Example 3 – Overflow: Scroll

<div style="width: 200px; height: 200px; background-color: lightblue; overflow: scroll;">
    <p style="font-size: 20px; padding: 10px;">This text will have scrollbars if it overflows the container.</p>
</div>

In this example, we have a div element with a width and height of 200 pixels and a light blue background color. The Overflow property is set to Scroll, which means that any content that exceeds the dimensions of the container will be clipped and scrollbars will be added to the container. We have added a paragraph element inside the div with some text content and padding. As the text exceeds the dimensions of the container, scrollbars are added, allowing users to scroll and view any content that exceeds the container dimensions.

Example 4 – Overflow: Auto

<div style="width: 200px; height: 200px; background-color: lightblue; overflow: auto;">
    <p style="font-size: 20px; padding: 10px;">This text will have scrollbars if it overflows the container.</p>
</div>

In this example, we have a div element with a width and height of 200 pixels and a light blue background color. The Overflow property is set to Auto, which means that scrollbars will be added to the container when the content exceeds the dimensions of the container. If the content fits inside the container, then no scrollbars are added. We have added a paragraph element inside the div with some text content and padding.
As the text exceeds the dimensions of the container, scrollbars are added, allowing users to scroll and view any content that exceeds the container dimensions. If the content did not exceed the dimensions of the container, no scrollbars would be added.