overflow: hidden clips content at an element’s padding box (also called its padding edge). Bottom padding is inside that clipping boundary, not an extra strip beyond it. If a fixed height, max-height, block-size, or max-block-size limits the element, content can therefore appear to run into—or be cut off at—the bottom padding.
What the browser is clipping
CSS defines the overflow clipping edge at the padding edge. MDN describes hidden as clipping overflow “at the element’s padding box,” while CSS 2.2 says the overflow property clips a box to its padding edge when clipping is requested: MDN overflow reference and CSS 2.2, section 11.1.1.
Padding is part of that box. It does not enlarge the clipping region beyond the box’s outer padding edge. The problem is most visible when the same element has a constrained vertical size, such as:
heightormax-heightblock-sizeormax-block-size- a grid or flex track that resolves to a limited size
In those cases, the last lines of content may be clipped at the element’s bottom padding edge, making the declared bottom padding look ineffective.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The reliable fix: separate padding from clipping
Put the visual spacing on an outer wrapper and apply the height constraint and clipping to an inner content element:
.card {
padding-bottom: 1rem; /* remains visible */
}
.card__content {
max-height: 12rem;
overflow: hidden; /* clips inside the inner box */
}The wrapper owns the breathing room, while the inner element owns the clipping boundary. Use this structure when the design requires a visible gap below a truncated region.
When padding must remain inside the clipped element
If the padding itself must be part of the constrained box, increase the available height (or remove the constraint) so the padding and the desired content can fit. Padding cannot extend the clipping region beyond the padding box. Revising the content, changing the sizing rule, or allowing the box to grow may be the better solution.
Check sizing and box-model calculations
- Inspect the element in browser developer tools and read the computed
height,max-height,block-size, andmax-block-size. - Check whether a parent grid or flex layout is imposing a smaller resolved size than the element’s declared value.
- Check
box-sizing. Withbox-sizing: border-box, a declared height or width includes padding and border. This can make a fixed-size layout easier to reason about, but it does not move the overflow clipping edge. - Temporarily remove the size constraint and
overflowrule. If the padding becomes visible, the constraint—not a failure ofpadding-bottom—is causing the symptom.
Choose the overflow value based on access needs
| Value | Visual result | Can overflow be reached? | Use when |
|---|---|---|---|
hidden |
Clips overflow and shows no scrollbar | Yes. It remains a scroll container; focus navigation or script can reveal clipped content. | You need a clean appearance but hidden interactive content may still need keyboard or programmatic access. |
clip |
Clips overflow with no scrolling mechanism | No programmatic scrolling; hidden content is not scrollable. | Clipping must be absolute and the hidden content is not required to remain reachable. |
auto |
Provides scrolling when overflow occurs | Yes, with user scrolling. | Users need dependable access to all overflowed content and scrollbars are acceptable. |
Before replacing hidden with clip, consider keyboard users and focusable controls inside the clipped area. clip prevents the scrolling behavior that hidden retains.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why common changes do not solve it
Adding more bottom padding
More padding changes the size calculation inside the same padding-box boundary; it does not create a second visible region below the clipping edge when the constrained size remains fixed.
Switching to border-box
border-box changes whether declared dimensions include padding and borders. It helps explain why a fixed height is full sooner, but it does not make overflow render outside the padding box.
Removing overflow: hidden
This can confirm the diagnosis, but it may expose unwanted content. Decide whether the component should grow, scroll, or intentionally truncate instead of treating the rule as a cosmetic toggle.
A practical debugging checklist
- Find the first ancestor with a constrained height or block size.
- Compare the element’s content, padding, border, and resolved dimensions in computed styles.
- Look for flex or grid minimum-size behavior that limits the available track.
- Move bottom padding to an unclipped wrapper if it is visual spacing rather than part of the truncated content.
- Use
autowhen every item must remain reachable; retainhiddenonly when clipping is intentional and access requirements are understood. - Use
cliponly when scrolling—including script- or focus-driven scrolling—must be disallowed.
What can and cannot be diagnosed from the symptom alone
The standards behavior is consistent, but the exact cause on a particular page depends on its HTML, computed styles, browser layout, and sizing rules. Without that page’s markup and styles, it is not possible to identify whether the limiting factor is a fixed height, a maximum height, a flex or grid track, margins, or another rule. Inspect the resolved box in developer tools, then apply the wrapper pattern or adjust the constraint that matches the intended design.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
