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
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.
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.
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.
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.
Do comment if you have ever got any issues related to overflow property and how you were able to fix it.