CSS Overflow Property - Handling Overflow in Web Layouts

In CSS, the overflow property controls how content is handled when it overflows the boundaries of its container. If the content inside an element is larger than the box it resides in, overflow determines whether to clip, show, or provide scrollbars for the overflowing content.

Syntax:

overflow: visible | hidden | scroll | auto;

Value	Description	Effect
visible	Content is not clipped and will be rendered outside the container if it overflows.	The content may overlap other elements, depending on the layout.
hidden	Content that overflows the container is clipped (not visible), and no scrollbars are provided.	Only the part of the content that fits within the container will be visible, and the rest is cut off.
scroll	Content is clipped, but scrollbars are added so users can scroll to see the rest of the content	The container always shows scrollbars, even if the content does not overflow.
auto	If the content overflows, scrollbars are provided; otherwise, they are hidden.	Scrollbars only appear when the content exceeds the container's bounds.

Example

div {

background-color: #50ffd2;

width: 200px;

height: 60px;

border: 1px solid;

overflow: visible;

}

Try it yourself

Try It:

Visible

Hidden

Scroll

Auto

You can use the overflow property when you want to overflow it.you can use visible,scroll,auto and hidden also

Currently Active Property:

background-color : #50ffd2;

width : 200px;

height : 60px;

overflow : visible;

overflow-x and overflow-y:

These control the overflow behavior in the horizontal (overflow-x) and vertical (overflow-y) directions separately.

Example

.overflow {

background-color: #50ffd2;

width: 200px;

height: 60px;

border: 1px solid;

overflow-x: scroll;

overflow-y: hidden;

}

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.