Overflowing content in CSS

what is overflow?

Everything in CSS is a box. You can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size). Overflow happens when there is too much content to fit in a box.

CSS tries to avoid "data loss"

You might wonder why CSS works in such a messy way, displaying content outside of its intended container. Why not hide overflowing content? Why not scale the size of the container to fit all the content?
Wherever possible, CSS does not hide content. This would cause data loss.
The problem with data loss is that you might not notice.
Website visitors may not notice.
If the submit button on a form disappears and no one can complete the form, this could be a big problem! Instead, CSS overflows in visible ways.
You are more likely to see there is a problem. At worst, a site visitor will let you know that content is overlapping.

The overflow property

The overflow property is how you take control of an element's overflow.
It is the way you instruct the browser how it should behave.
The default value of overflow is visible. With this default, we can see content when it overflows.
To crop content when it overflows, you can set overflow: hidden. This does exactly what it says: it hides overflow. Beware that this can make some content invisible. You should only do this if hiding content won't cause problems.