Set an Element's Overflow

By Stephen Bucaro

The overflow setting specifies what should happen when an element's content when it's too large to fit inside the elements area. Set can be set to visible, hidden, auto, or scroll. The default is visible.

visible - The element stretches to make the overflowing content visisble.
hidden - The overflowing content is not visisble.
auto - Scrollbars are added where necessary to make the overflowing content visisble.
scroll - Scrollbars are added to the element.

<div style="border-style:solid; border-width:1px; width:100px; height:100px;">
100 pixels wide
100 pixels high
</div>

The <div> element shown above is set to a width of 100 pixels and a height of 100 pixels.

<div style="border-style:solid; border-width:1px; width:150px; height:150px; overflow: visible;">
We the people of the United States, in order to form a more perfect union, establish justice, insure
domestic tranquility, provide for the common defense, promote the general welfare, and secure the
blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the
United States of America.</div>

If overflow is set to visible and an amount of text is placed inside the element that is too large to be contained within a 100 pixel by 100 pixel area, the element will stretch vertically and wrap the text to fit.

If overflow is set to visible and an image wider and higher than the width and height set for the element is placed inside the element, the element will stretch horizonally and vertically to show the entire image.

If overflow is set to hidden and an image wider and higher than the width and height set for the element is placed inside the element, the part of the image outside the set width and height of the element will not be visible.