The overflow property controls what happens to content that is too big to fit into an area. It specifies whether to clip content or to add scrollbars when an element's content is too large to fit in its specified area.

Key Values

• visible: The default. The overflow is not clipped. The content renders outside the element's box.
• hidden: The overflow is clipped, and the rest of the content will be invisible.
• scroll: The overflow is clipped, but a scrollbar is added to see the rest of the content.
• auto: If overflow is clipped, a scrollbar should be added to see the rest of the content (usually only if needed).

Axis Control

You can control overflow horizontally and vertically independently using the overflow-x and overflow-y properties.

Best Practices

Use overflow: auto when you want scrollbars only if content exceeds the container. Avoid overflow: scroll if you don't want empty scrollbars showing up on valid layouts. Be careful with overflow: hidden on text containers, as it might make content inaccessible if users resize their browsers or increase font sizes.