Overflow

We've added five more breeds to the list in index.html. They don't fit into the box with its fixed height of 220 pixels, so they spill out of it. We say that the content overflows.

The overflow property sets what happens to content that doesn't fit into its box:

• visible: the content spills out of the box and can overlap whatever comes below it. This is the default value.
• hidden: whatever doesn't fit is cut off. Careful: visitors then have no way to see it.
• scroll: the box can be scrolled. Some systems show the scrollbars even when everything fits.
• auto: the box can be scrolled only when the content doesn't fit. This is usually the best choice.

For one direction only, use overflow-x (horizontal) or overflow-y (vertical).

A fixed height suits boxes like our list, which should take up a certain amount of space. For ordinary text, it's better to leave the height at auto: the box then grows with its content, and nothing overflows.