How to fix overflow css

Show different overflow property values:

div.ex1 {  overflow: scroll;}div.ex2 {  overflow: hidden;}div.ex3 {  overflow: auto;}div.ex4 {  overflow: clip;}div.ex5 {  overflow: visible;

}

The overflow property specifies what should happen if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

CSS Syntax

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

Property Values

Related Pages

CSS tutorial: CSS Overflow

CSS tutorial: CSS Positioning

HTML DOM reference: overflow property

The CSS overflow property controls what happens to content that is too big to fit into an area.

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary

Note: The overflow property only works for block elements with a specified height.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

overflow: visible

By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

div {  width: 200px;  height: 65px;  background-color: coral;  overflow: visible;

}

With the hidden value, the overflow is clipped, and the rest of the content is hidden:

Try it Yourself »

overflow: scroll

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Try it Yourself »

The auto value is similar to scroll, but it adds scrollbars only when necessary:

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Try it Yourself »

The overflow-x and overflow-y properties specifies whether to change the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.
overflow-y specifies what to do with the top/bottom edges of the content.

You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

div {  overflow-x: hidden; /* Hide horizontal scrollbar */  overflow-y: scroll; /* Add vertical scrollbar */

}

The overflow shorthand CSS property fixes what needs to be done when the content of your element is too large to fit in the block formatting. Basically, it’s an abbreviation for overflow-y and overflow-x. It also indicates whether a scroll bar should appear or whether the content is cut. Thus, the overflow-y property indicates the handling in the vertical direction, while the overflow-x property indicates the handling in the horizontal.

The overflow property in CSS is extremely important in the development of websites with an interactive aspect, which contain a lot of content. Look at the examples in this article to be able to familiarize yourself with more streams. The overflow property takes care of what exactly happens to content that breaks outside its limits. For example, take a div where you set the width to be 200px, but it contains an image that is 350px wide. This image will be visible by default and will remain in div.

Syntax

The syntax below is used to define the overflow property, namely:

The overflow property can have several values, such as:

• auto — scroll bars appear as needed, the browser setting how it will manage content and may differ from browser to browser
• scroll — here the content is cut and the required scroll bars are displayed
• visible — in this case, the content is played outside the box
• hidden — in this case, the content is cut, but the scroll bars are not displayed
• clip — exactly as in the case of the hidden property, the content is cut by the element’s fill box. The difference between the two ( the clip and the hidden} is that the keyword of the clip prohibits all scrolling, including programmatic scrolling. The box does not represent a scrolling container, and it does not start from a formatting context. If you want to create a new formatting concept, you can use display: flow-root to do this
• overlay — practically, the value behaves like a clip, but with scroll bars above the content instead of taking up space. This value is only accepted in WebKit (Safari) and Blink-based browsers (Opera or Google Chrome)

Remember, the overflow property can be applied only to the elements in the table, line and block!

Now, let’s deal with the above-mentioned values, creating examples with these values.

The auto value is close to the scroll value, but it will only add scroll bars when needed. Here’s an example:

The scroll value will add a scroll bar both vertically and horizontally. By setting the scroll value, the overflow is cut so that later a scroll bar is added to scroll inside the box. Let’s look at an example:

Now let’s talk about the visible valuation, namely the visible overflow. In this case, by default, the overflow is visible, the information is not cut and is rendered outside the item box. Here is an example where we use this value in the rows below:

Let’s discuss the value we just mentioned, namely overflow hidden. Once the value is hidden, the retrieval is cut off and all content is hidden. Let’s look at the following example using hidden overflow.

Now, let’s talk about overflow-y and overflow-x. These two properties, namely overflow-y and overflow-x, indicate whether it is necessary to change the content overflow only vertically or horizontally. Therefore, overflow-y indicates what needs to be done with the bottom and top edges of the content and overflow-x indicates what to do with the left and right edges of the content. Here is an example:

The overflow property is supported by the following browsers: Google Chrome, Firefox Mozilla, Safari and Opera.