The CSS overflow property specifies how to handle the content when it overflows whether to clip content or to add scroll bars.
For example: If you don’t set the height of the box, it will take as large as the content. But if you set a particular height or width of the container and the content inside cannot fit then what will happen. This CSS overflow property is used to overcome this problem. It determines whether to clip content, add scroll bars, or just display content.
It has the following possible values: visible, hidden, scroll, and auto.
Visible
If you don’t set the overflow property then the default is set i.e. visible.
The visible property specifies that overflow is not clipped. it renders outside the element’s box.
Hidden
If you set the hidden value then overflow is clipped. No scroll bar is provided. Excess content remains invisible.
Scroll
To set the overflow value scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.
The scroll value gives scrollbars both horizontally and vertically even if they don’t need it.
Auto
If you set overflow is auto, it will automatically provide the scrollbars to see the rest of the content if needed, otherwise, the scrollbar will not appear.
Overflow-x
CSS overflow-x property which used to defines the content may be clipped, hidden, or add a scroll bar, or display overflow content of a block-level element when it overflows at the left and right edges.
It has the following possible values: visible, hidden, scroll, and auto.
Overflow-y
The CSS overflow-y property which defines the content may be clipped, hidden or a scrollbar may be displayed accordingly based on the value assigned to the overflow-y property.
It has the following possible values: visible, hidden, scroll, and auto.