Overflow

CSS Overflow Summary

Overflow controls what happens when content is larger than the box that contains it.

.panel {
	height: 200px;
	overflow: auto;
}

Overflow problems happen when text, images, tables, or other content does not fit inside the available space.

Visible Is The Default

With overflow: visible, content can spill outside the box. This is the default behavior.

.box {
	height: 100px;
	overflow: visible;
}

Hidden Clips Extra Content

overflow: hidden cuts off content that does not fit. This can be useful for cropping, but it can also hide important text or controls.

.thumbnail {
	overflow: hidden;
}

Auto Adds Scrollbars When Needed

overflow: auto adds scrolling only when the content does not fit.

.table-wrapper {
	overflow-x: auto;
}

This is common for wide tables on small screens because it keeps the page from creating unwanted horizontal scrolling.

Overflow Can Be Horizontal Or Vertical

overflow-x controls left-and-right overflow. overflow-y controls top-and-bottom overflow.

Before hiding overflow, ask whether the content should resize, wrap, or use a better layout instead.