Everything about css overflow property

What is overflow in css?

Imagine we have a box and we fixed it's height or width, and we put some
data in it, but when or if we put
more data then the data comes out from the box.
It means the data is overflowing from the box. It happens because of the height or width is
fixed but the data is too much and can't set in that height or width. To solve this
problem we have overflow property.
Overflow has three properties:
overflow
Used to handle overall problem in both x and y axis.
overflow-x
Used to handle overflow in x-axis
overflow-y
Use to handle overflow in y axis

These properties has four values:
hidden;
It means the overflowing data will be hidden.
scroll;
It means a scroll bar will create and we can see the
data by scrolling.
auto;
It means create a scroll bar depends on program. If scroll bar is needed
then create a scroll bar and if not then don't create.
visible;
It is the default value.It will left the data as it is.