When we were learning about combining size types, we saw an example where the text inside an element “overflowed” its containing box. We can choose to address this situation in a couple of ways:

Ignore it (boo!).
Resize our elements so they fit the content.
Tell the browser what to do with extra content.

In the latter option, we will use the “overflow” CSS property (overflow: ). This property takes one of four values:

visible; this is the default. Your content will render outside of its block.
hidden; overflow content will be hidden.
scroll; scroll bars will be provided for overflow content, even if there is no overflow.
auto; scroll bars are only added/visible when necessary.