CSS Overflow: clip, overflow-clip-margin, and Scroll Overflow Patterns

Home » CSS » CSS Overflow: clip, overflow-clip-margin, and Scroll Overflow Patterns
December 5, 2025 CSS
CSS Overflow: clip, overflow-clip-margin, and Scroll Overflow Patterns

overflow: clip (baseline 2023) behaves like hidden but does not create a new formatting context and does not establish a scroll container — solving the long-standing problem where overflow: hidden on a parent breaks position: sticky children. The companion overflow-clip-margin property lets you define how far outside the border box clipping begins, enabling “bleed” effects that are otherwise impossible with overflow: hidden.

Problem: CSS overflow: hidden clips content that overflows its container — but some design patterns require content to visually overflow the box while the box itself is still scrollable, or to clip content at the element boundary without affecting scroll.

Solution: Use overflow: clip to clip content at the element's padding box without creating a scroll container — unlike hidden, it does not establish a block formatting context that traps position:sticky descendants. Use overflow-clip-margin to allow a specific amount of overflow before clipping. These properties solve sticky-header conflicts caused by overflow: hidden on ancestor elements.


The examples below show when to use clip vs hidden, the overflow-clip-margin bleed pattern, handling horizontal scroll on mobile code blocks, and a sticky header inside a clipped container.


/* ── 1. overflow: clip vs overflow: hidden ──────────────────────────────
   clip:   visually clips, no scroll container, no new BFC
   hidden: visually clips, creates scroll container, creates new BFC     */

/* sticky child BREAKS with overflow: hidden on the parent */
.bad-parent { overflow: hidden; }       /* breaks sticky */

/* sticky child WORKS with overflow: clip */
.good-parent {
    overflow: clip;                     /* clips visually, no BFC change */
    overflow-clip-margin: 0;            /* default: clip at border box */
}

/* sticky header inside the clipped container still works */
.good-parent .sticky-header {
    position: sticky;
    top: 0;
}

/* ── 2. overflow-clip-margin: bleed effect ──────────────────────────────
   Allows content to bleed N pixels beyond the border box before clipping */
.card-with-bleed {
    overflow: clip;
    overflow-clip-margin: 1.5rem;    /* image can bleed 1.5rem outside card */
    border-radius: 8px;
    padding: 1rem;
}

.card-with-bleed .card__image {
    /* Image bleeds into the 1.5rem overflow-clip-margin zone */
    margin: -1.5rem -1.5rem 1rem;
    width: calc(100% + 3rem);
}

/* ── 3. Horizontal scroll for code blocks (WordPress .wp-block-code) ─── */
.wp-block-code,
pre.wp-block-cedaro-code {
    overflow-x: auto;       /* horizontal scroll when code is too wide */
    overflow-y: clip;       /* clip vertically — no vertical scroll container */
    max-width: 100%;
    scrollbar-width: thin;
}

/* ── 4. Scroll snap with overflow ───────────────────────────────────────── */
.scroll-gallery {
    display: flex;
    gap: 1rem;
    overflow-x: scroll;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;   /* hide scrollbar on modern browsers */
}

.scroll-gallery > img {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: min(320px, 80vw);
    height: auto;
    border-radius: 6px;
}


NOTE: overflow-clip-margin only has an effect when overflow is set to clip — it has no effect with hidden, scroll, or auto; and it requires the same value on both the inline and block axes unless you use the longhand forms overflow-clip-margin-inline and overflow-clip-margin-block.

Related posts