There can be times when we need a div to remain a certain size despite the content that is inside. For this effect we use the overflow property.

There are three settings for overflow: hidden, scroll, and auto.

Hidden:

With overflow:hidden, any text that excedes the bounds of the div will not be displayed.

Example:

Scroll:

overflow:scroll places vertical and horizontal scrollbars. The problem with this is that it will display the scrollbars even though there’s no need to.

Example:

Auto

overflow:auto only adds a scrollbar if there is a need for it. I prefer using this over scroll becuase of added horizontal scrollbar.

Example:

Visible

There is another setting, visible, that keeps the size of the div, but lets the contents overflow outside of the bounds.

Example

If you want to make the div expand with the content, just don’t set the overflow property. If you want it to expand horizontally, set the height but DON’T set the width. Likewise, if you want to expand vertically, set the width but DON’T set the height. Simple as that.

Example

Hope this helps!