CSS Overflow Property

Advertisement

Elements on pages are arranged in form of boxes, and we can control the sizing, positioning and behavior of these boxes with CSS. Suppose a container box has fixed width and the content box doesn’t fit in, here we can use overflow declaration to control the behavior of the inner box.

CSS Overflow property has four values: visible (default), hidden, scroll, and auto. Let’s discuss these values in detail and the result they produce.

Values of CSS Overflow Property

Visible

The default value of overflow property is visible. So you don’t have to set this value again, only if you want to override it. Here i have embedded the resulted image.

overflow visible value CSS Overflow Property

Hidden

The value opposite to visible is hidden. Means the content that doesn’t fit in will not be visible and will hide itself in the container box. This value is very useful on sites generating dynamic content and to avoid any layout issues you can set the overflow property to hidden.

overflow hidden value CSS Overflow Property

Scroll

This value will hide the content from showing outside the box but you can use scroll bars to view the content. Both horizontal and vertical scroll bars will be visible even if you need only one.

overflow scroll value CSS Overflow Property

Auto

This value acts same as scroll value but only that scroll bar is visible which is needed. Suppose if content is expanding on x-axis only horizontal scroll bar will be visible.

overflow auto value CSS Overflow Property

Do comment if you have ever got any issues related to overflow property and how you were able to fix it.

Advertisement

There is 1 comment for this article

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>