Why content overflows
A CSS box has a content area, but its contents do not always fit inside it. A long word may extend past the edge of a narrow card. An image may be wider than its container. A fixed-height panel may contain more text than its height allows. This is overflow: content extending beyond the space available to it.
To explore it, you need a text editor and a browser that supports standard CSS. No library or version-specific feature is required for the examples described here. Create a box containing several paragraphs, give it a height of 100px, and add a border so its boundaries are easy to see. The paragraphs will likely need more vertical space than the box provides. What happens next depends partly on the overflow property.
Choose an overflow value based on what readers need
The default value, visible, lets overflowing content appear outside the box. This can make text overlap a neighboring element, but it also means the extra text is not simply cut off. Set overflow to hidden and the box clips content at its edges. Hidden is useful for some visual effects, but it is a poor way to handle essential text: readers may have no obvious way to reach what is missing.
Set overflow to auto when you want the browser to provide a way to scroll if content does not fit. Set it to scroll when you want a scroll container even if scrolling is not currently needed; the appearance of scrollbars can vary by browser and operating system. The clip value also cuts off content, but unlike hidden, it does not create a scroll container. Use clip only when discarding what lies outside the edge is intentional.
Overflow can be set separately by axis. overflow-x controls horizontal overflow, and overflow-y controls vertical overflow. For example, a wide data display might need horizontal scrolling while the rest of the page keeps its normal vertical flow. Test the result rather than assuming the two axes behave independently in every combination; CSS adjusts some combinations of overflow values.
Fix the cause before adding a scrollbar
A scrollbar can be appropriate for a deliberately bounded area, but it should not be the automatic fix for every overflowing box. If ordinary paragraphs are cut off because a card has a fixed height, removing that height may let the card grow with its content. That approach is often more resilient when text changes or a reader increases the font size.
For a wide image, consider making its maximum width 100% of its container while allowing its height to adjust proportionally. For an unbroken string, such as a long identifier, consider overflow-wrap: anywhere so the browser has places to break it. If an item inside a flex or grid layout refuses to shrink, inspect its sizing rules as well as its overflow setting; in some layouts, setting an appropriate minimum width can help.
These fixes address different problems. Wrapping text will not make a large image narrower, and clipping an image will not make a long word readable. Identify which piece of content exceeds which boundary before changing CSS.
Make scrollable areas discoverable and usable
A small scrollable panel can be easy to miss, especially if its scrollbar is not always visible. Give it a clear boundary or context so readers can recognize that more content is available. Avoid nesting several scrollable areas unless the interaction genuinely calls for it; moving through them can become confusing on touchscreens and with a keyboard.
Check whether someone can reach and use the area without a pointer. The browser, its version, and the elements inside the panel can affect keyboard behavior, so test the actual page. If the panel contains controls, make sure none are cut off or obscured as focus moves through them. Also check a narrow viewport and enlarged text: content that fits at your usual window size may overflow under those conditions.
The guiding question is whether the content should extend, wrap, resize, scroll, or be intentionally clipped. Once you know the intended behavior, overflow becomes a precise tool rather than a quick way to hide a layout problem.
