CSS overflow Property
The overflow property defines what happens when content overflows an element's box.
- visible - content should be allowed to overflow and be displayed outside of its containing box - this is the default value.
- hidden - content that would otherwise overflow its box should be clipped and not displayed at all.
- scroll - if an element has this value the browser should display a scrolling mechanism, such as a scrollbar. Overflowing content will be available through scrolling and when the content doesn't overflow the scrollbar should still be displayed - this is to prevent scrollbars appearing and dissappearing in dynamic situations.
- auto - the browser decides what to do with any overflowing content but if there is content which would spill out of its box the browser should provide some sort of scrolling mechanism so that the content is available.
- inherit - the value is inherited from the parent element.
Below are examples of the overflow property with the different values available.
Overflowing content is allowed to spill out of the containing box.
The content is cut to fit within the containing box and any overflow cannot be accessed.
Content is kept within the containing box but the overflow can be seen using the scrollbar provided by the browser.
In this case you can see that the content easily fits inside the containing box with no need for scrollbars, but because the value is set to scroll the browser is required to display a scrollbar.
The browser applies its own rules for overflowing content - usually with a scrollbar.