<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
div {
width: 200px;
height: 100px;
border: 2px solid black;
}
6.5 
As you can see, the text is spilling out of our box and looking very untidy. Let’s see what we can do here.
The available options are as follows:
- Visible. Visible is the default selection. It simply allows the content to overflow and renders the content outside of the element’s containing box.
- Hidden. Hidden is as self-explanatory as you would hope it to be – it simply hides the overflowing content. Everything inside the div will be shown, everything outside will be hidden. This is a very useful value, especially when working with overflowing images.
- Scroll. This creates a mini scroll-area. The div will adopt a scrollbar which will allow users to scroll up and down inside the div to see the overflowing content.
- Auto. This value specifies that if the content is overflowing, a scrollbar will be added to allow the user to scroll to see the remaining content. If content is not overflowing, then no scrollbar will be added. This differs from the scroll value as the scroll bar is not always present regardless of whether the content is actually spilling out or not, like it is when ‘scroll’ is used.
These four options are very useful and powerful and can even be used for non-text content inside the element. Even other divs that are absolutely positioned inside the div will be affected and clipped if overflowing.