Overflow

You might say

The bottom of this card is hidden. Check whether it is vertical overflow and keep the action from being clipped.

Overflow is the rule for how the browser shows, clips, or scrolls content that exceeds a container's available space.When a card has a fixed height, longer content can cross its bottom edge. If an ancestor uses overflow: hidden, the bottom description and action disappear. Overflow can be horizontal or vertical. It answers what happens after content no longer fits and should not hide a layout that needs reworking.

Know first

Box Model

CSS Overflow

Why content at the bottom of a card gets clipped

Video resultheight: 250px · overflow-y: visible

READY TO EXPORT

Weekend travel video

✓

Captions generated32 lines matched to speech

✓

Cover selectedTitle remains readable

✓

Export quality1080p · MP4

Card bottom

The download button spills past the card bottom.

What happens after a container is too small

Find which layer no longer fits: First check whether content crosses the card boundary, then inspect the exact container's fixed height, max-height, overflow, and real scroll area. hidden only conceals the result; it does not explain why content no longer fits.

Essential content must remain visible or reachable: A normal content card should usually grow with its content. Use internal scrolling only for intentionally bounded lists or panels, with a visible cue. Do not silently clip an action, error, or primary content.

Quick checkChoose the best answer

A content card loses its Download video button when the copy becomes longer. What is the best first step?

Find the exact container with a fixed height or `overflow: hidden`, then choose whether the card should grow or, only when bounded height is intentional, scroll internallyOnly set the button's `z-index` to 9999 without checking whether its parent clips itDelete the last description so this one card happens to fit

You can say this to an AI Agent

Inspect this card's vertical overflow and identify the exact container using a fixed height, `max-height`, or `overflow: hidden`. The title, descriptions, and bottom action must remain visible and operable. Prefer letting a normal content card grow; use internal scrolling only when bounded height is intentional. Test the longest content on desktop and at 390px.

Learn next

1Responsive Design→