When the element content is bigger than the element boundary, overflow defines the visible behaviour on the screen.
There are five kinds of overflow behaviours are supported:
Displays the entire content without applying any change.
Hides the content overflowing outside of the element's boundary.
When the element's content is more extensive and overflows, there will be a scrollbar to read the content.
If the element's content fits inside its boundary, it looks the same as visible but establishes a new block formatting context.
Just as hidden, it clips the element's content to its boundary. The difference is that the
clip forbids all scrolling and programmatic scrolling. The element is not a scroll container. Also, it does not start a new formatting context.
There are two types of overflow directions supported:
It sets the overflow direction to horizontal.
It sets the overflow direction to vertical.
Got a question? Ask here.