sticky CSS

Why Does Sticky Stop Working Inside Grid or Flexbox?

by

Sticky inside grid flex not working bugs happen when the sticky item is stretched, trapped by its parent height, or placed in a layout context that leaves no scroll room.

CSS Sticky Layout Fix

Why does sticky stop working inside grid or flexbox?

Sticky inside grid flex not working issues usually happen when the sticky element is stretched, when its parent does not have enough height, or when the layout makes the sticky item the same height as the scroll area. position: sticky still works in Grid and Flexbox, but those layout systems can create conditions that make sticky look broken.

This bug usually appears in sidebars, article layouts, pricing tables, documentation pages, dashboard panels, and two-column sections. The sticky code may be correct: position: sticky and top: 24px. But the grid or flex parent may stretch the sidebar, align it incorrectly, or give it no meaningful scrolling distance. The fix is usually to control alignment and parent structure, not to keep adding z-index.

  • position: sticky
  • CSS Grid
  • Flexbox
  • align-items

Test sticky outside the layout first

Temporarily move the sticky element outside the grid or flex wrapper. If it starts working, the sticky rule is probably fine. The layout context around it is what needs debugging.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector

What the bug looks like

A sticky sidebar, filter panel, or table of contents scrolls away inside a grid or flex layout.

Why it happens

The sticky item is stretched, trapped by the parent, or given no useful scroll distance.

What usually fixes it

Set align-self:start, avoid stretch, define top, and keep the parent tall enough.

Why sticky can fail even when the CSS looks right

position: sticky needs a scroll range. The sticky element starts in normal flow, then sticks when it reaches its offset. But if Grid or Flexbox stretches the sticky item to match the height of the parent or the main content, there may be no visible room for the element to travel.

In Grid and Flexbox, default alignment can be more powerful than people expect. A grid item may stretch to fill its grid area. A flex item may stretch across the cross axis. That behavior can be useful for equal-height columns, but it can make a sidebar or navigation block behave like a tall rail instead of a compact sticky element.

The clean fix is to separate the layout column from the sticky box. Let the column participate in Grid or Flexbox, but make the sticky child keep its natural height. Then give it a clear top offset and enough parent height to remain useful while the main content scrolls.

Sticky needs movementIf the sticky box is as tall as the parent, it has nowhere useful to stick.
Stretch is subtleYou may not write stretch, but Grid and Flexbox can still apply it.
The parent sets limitsSticky cannot freely escape the section that contains it.
Better mindsetMake the sticky box compact before debugging scroll behavior.
Error 1

A grid item stretches the sticky sidebar

The most common grid version happens when the sidebar is a grid item and the grid row stretches it to match the main content height. The sidebar may look like a full-height column, but the sticky element inside no longer behaves like a compact block.

Broken code

Grid stretch 
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
}

.sidebar {
  position: sticky;
  top: 24px;
}

Broken visual result

Sidebar becomes tall rail
stretched
Article grid

The sidebar stretches with the grid row.

Content Sticky same height
The sticky element is not broken by syntax. It is being stretched by the grid context.

Correct code

Start alignment 
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 24px;
}

Fixed visual result

Sidebar keeps natural height
sticky
Article grid

The sidebar starts at the top and can stick naturally.

Content Sticky natural height
Use align-items:start when the grid items should not stretch vertically.
Error 2

A flex row stretches the sticky item

Flexbox has the same trap. If the flex container uses default stretch behavior, the sidebar or filter panel can be stretched to match the tallest column. That makes the sticky item feel stuck to the layout instead of the viewport.

Broken code

Flex stretch 
.page-row {
  display: flex;
  gap: 24px;
}

.filter-panel {
  position: sticky;
  top: 20px;
}

Broken visual result

Panel inflates
inflated
Filter layout

The panel stretches with the flex row.

Filters Tall Row
Flexbox stretch can turn a compact sticky panel into a full-height column.

Correct code

Flex-start alignment 
.page-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.filter-panel {
  position: sticky;
  top: 20px;
  flex: 0 0 260px;
}

Fixed visual result

Panel stays compact
compact
Filter layout

The filter panel keeps its own height and sticks cleanly.

Filters Natural Sticky
Use align-items:flex-start when a sticky flex child should keep natural height.
Error 3

The sticky element is placed on the wrong layer

Sometimes the grid or flex item should not be sticky at all. The column should be a layout container, and the small inner card should be the sticky element. Putting sticky on the outer column can make the entire area behave incorrectly.

Broken code

Sticky on outer column 
.aside-column {
  position: sticky;
  top: 24px;
}

.aside-card {
  padding: 20px;
}

Broken visual result

Wrong layer sticks
layer
Aside column

The whole column is sticky instead of the compact card.

Column Outer sticky awkward
Sticky should be applied to the element that visually needs to stay visible.

Correct code

Sticky on inner card 
.aside-column {
  align-self: start;
}

.aside-card {
  position: sticky;
  top: 24px;
  padding: 20px;
}

Fixed visual result

Right layer sticks
layered
Aside column

The column lays out normally while the card sticks.

Column Inner card sticks
Put sticky on the compact UI element, not necessarily the whole layout column.
Error 4

The parent section is not taller than the sticky item

Sticky is bounded by its parent. If the parent section is short, the sticky element may stop as soon as it starts. This is especially common in componentized layouts where each row, card, or section wraps only a small amount of content.

Broken code

Short parent 
.feature-row {
  display: grid;
  grid-template-columns: 1fr 240px;
}

.feature-sticky {
  position: sticky;
  top: 20px;
}

Broken visual result

Sticky stops immediately
short
Short feature row

The parent ends before sticky can do much.

Starts Stops
A sticky element cannot keep sticking after its parent section ends.

Correct code

Parent has scroll range 
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}

.article-sidebar {
  position: sticky;
  top: 20px;
}

Fixed visual result

Sticky has room
stable
Long article layout

The main content creates enough scroll range.

Sidebar Stays
Sticky belongs inside sections that last long enough for the behavior to matter.
Premium pattern

A production-minded sticky grid and flex pattern

A premium sticky layout keeps the layout wrapper stable, prevents cross-axis stretch, places sticky on the compact inner element, and gives it a clear offset. This pattern works for article sidebars, filter panels, documentation navigation, and sticky CTAs.

Premium code

Sticky-safe grid/flex 
.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

.sidebar-column {
  align-self: start;
  min-width: 0;
}

.sidebar-card {
  position: sticky;
  top: 24px;
}

@media (max-width: 780px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-card {
    position: static;
  }
}

Premium visual result

Sticky behavior is intentional
premium
Sticky article system

The layout aligns to the top, the card sticks, and mobile returns to normal flow.

Desktop
align start top set sticky card
Mobile
one column static no awkward sticky
Premium sticky layouts control alignment, parent height, and mobile behavior instead of relying on sticky alone.

Fast practical rule

If sticky stops working inside grid or flexbox, check stretch first. Add align-items:start to the container or align-self:start to the sticky column, define top, and make sure the parent section is tall enough for sticky movement.

Debug checklist

  • Confirm the sticky element has position:sticky and a real top value.
  • Inspect the grid or flex parent for default stretch behavior.
  • Add align-items:start to the grid or flex container.
  • Try align-self:start on the sticky column or sticky item.
  • Check whether the sticky item is as tall as the parent.
  • Move sticky from the outer column to the inner card when needed.
  • Make sure the parent section is taller than the sticky element.
  • Disable sticky on mobile if the layout stacks into one column.
Best first moveAdd align-items:start to the grid or flex container and re-test scroll.
Most common causeThe sticky sidebar is being stretched to match the height of the main content.
Most sneaky causeSticky is applied to the outer column instead of the small inner card.
Better mindsetSticky is a scroll behavior, but grid and flex alignment decide whether it has room to work.

When sticky should be disabled on mobile

Sticky sidebars often make sense on desktop but feel strange on mobile. Once a grid or flex layout collapses into one column, a sticky sidebar can cover content, waste space, or feel like a stuck block in the middle of the page.

A strong production pattern usually makes the sidebar static at smaller widths. The content becomes linear, the navigation becomes part of the normal flow, and the sticky behavior returns only when the layout has a real side column again.

The authority move is to treat sticky as a desktop enhancement, not a requirement for every screen size.

Why this bug survives desktop review

This bug survives because the layout can look perfect before scrolling. The sidebar appears in the right column, the spacing looks clean, and the sticky CSS is present. Only during scroll does the problem become obvious.

A proper review scrolls through long content, short content, desktop, tablet, and stacked mobile. Sticky components are not finished until they are tested through the entire scroll range of their parent.

Related fixes that can help

Sticky grid and flex bugs often connect to overflow clipping, general sticky failures, flex alignment, grid sizing, and responsive layout changes.

Why does position: sticky fail inside overflow:hidden? If an ancestor overflow rule is also trapping the sticky element. Read this fix
Fix position sticky not working If you need the broader sticky debugging checklist. Read this fix
Why does align-items:stretch make cards look wrong? If stretch is causing layout elements to become too tall. Read this fix
Why does CSS Grid need min-width:0? If the grid column also refuses to shrink correctly. Read this fix
Why does flex-shrink:0 break mobile layouts? If flex behavior is also forcing the sidebar or content too wide. Read this fix
Fix responsive design not working If sticky should change behavior across breakpoints. Read this fix

Final takeaway

Sticky stops working inside grid or flexbox because the layout context can stretch the sticky item, limit its parent, or remove the scroll room sticky needs. The sticky declaration may be correct while the surrounding alignment is wrong.

Use start alignment, keep the sticky element compact, place sticky on the right inner layer, and disable it when the layout stacks on mobile. That turns sticky from a fragile trick into a predictable part of your grid or flex system.

Want more fixes like this?

Browse more CSS positioning, sticky layout, Flexbox, Grid, and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Does position: sticky Fail Inside overflow:hidden?

by

Position sticky overflow hidden bugs happen when a sticky element is placed inside an ancestor that clips or controls overflow, changing where the sticky behavior is allowed to work.

CSS Sticky Position Fix

Why does position: sticky fail inside overflow:hidden?

position: sticky fails inside overflow:hidden because sticky elements do not simply stick to the browser viewport no matter where they live. They work within the rules of their ancestors. When a parent creates a clipped or scrolling context, the sticky element may be limited to that parent instead of sticking where you expected.

This is one of the most confusing sticky bugs because the sticky code can look perfect: position: sticky, top: 0, and a clear sidebar or header. But one wrapper above it has overflow:hidden, overflow:auto, or overflow:scroll, and suddenly the sticky behavior feels dead. The fix is usually not to add more z-index. The fix is to remove or relocate the overflow rule that traps the sticky element.

  • position: sticky
  • overflow:hidden
  • sticky parent
  • scroll container

Test the parent chain first

Temporarily remove overflow:hidden, overflow:auto, and overflow:scroll from parent wrappers in DevTools. If sticky suddenly works, the sticky rule was not the real problem.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector

What the bug looks like

A sticky sidebar, table header, nav bar, or CTA scrolls away like normal content.

Why it happens

An ancestor with overflow:hidden or another overflow value changes the sticky context.

What usually fixes it

Move clipping to a child wrapper, remove overflow from the layout parent, and keep top defined.

Why sticky breaks when a parent clips overflow

Sticky positioning is a hybrid between relative and fixed positioning. At first, the element behaves like normal flow content. When the scroll position reaches the offset you set with top, bottom, left, or right, the element starts sticking inside its allowed area.

The confusing part is the phrase “allowed area.” Sticky is not free to escape every parent. If a parent wrapper clips overflow, becomes a scroll container, or limits the element’s movement, sticky may never reach the behavior you expect. That is why the bug often appears after adding overflow:hidden to remove horizontal scroll, round card corners, hide animations, or clip decorative shapes.

The clean solution is to separate layout from clipping. The parent that controls the page layout should usually allow overflow to stay visible. If you need rounded corners or clipped artwork, place that clipping on an inner visual wrapper instead of the ancestor that contains the sticky element.

Sticky is contextualIt sticks inside the limits created by its parent and scroll context.
Overflow changes the rulesA single wrapper can make the sticky element appear broken.
Clipping is not layoutDo not put clipping on the same wrapper that sticky depends on.
Better mindsetFix the parent structure before blaming position: sticky.
Error 1

The sticky element lives inside an overflow-hidden wrapper

The most common mistake is placing a sticky sidebar or sticky CTA inside a wrapper that uses overflow:hidden. That overflow rule may have been added for a totally different reason, but it can still stop sticky from behaving like a viewport-based element.

Broken code

Parent traps sticky 
.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  overflow: hidden;
}

.sidebar {
  position: sticky;
  top: 24px;
}

Broken visual result

Sticky trapped by parent
trapped
Article layout

The sidebar scrolls with the clipped parent instead of sticking.

Content Sticky? scrolls away
The sticky rule looks correct, but the parent overflow rule changes the behavior.

Correct code

Layout stays visible 
.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  overflow: visible;
}

.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

Fixed visual result

Sticky can work
sticking
Article layout

The sidebar can now stick while the article keeps scrolling.

Content Sticky stays visible
Keep the layout parent overflow-visible when the sticky child needs room to stick.
Error 2

Overflow is used only to clip rounded corners

Many sticky bugs start because a developer uses overflow:hidden to make rounded corners look clean. The visual goal is reasonable, but clipping the whole layout wrapper can accidentally trap the sticky element.

Broken code

Clipping on layout parent 
.card-layout {
  border-radius: 24px;
  overflow: hidden;
}

.card-layout__aside {
  position: sticky;
  top: 20px;
}

Broken visual result

Rounded wrapper traps sticky
clipped
Rounded card layout

The wrapper clips corners and also limits sticky movement.

Round Clip Sticky fails
The clipping rule solves one visual problem but creates a sticky positioning problem.

Correct code

Clip only the visual child 
.card-layout {
  border-radius: 24px;
  overflow: visible;
}

.card-layout__media {
  border-radius: 24px;
  overflow: hidden;
}

.card-layout__aside {
  position: sticky;
  top: 20px;
}

Fixed visual result

Clipping moved inward
clean
Rounded card layout

The media clips visually, while sticky keeps its freedom.

Round Clip child Sticky works
Move clipping to the part that actually needs clipping, not the sticky layout wrapper.
Error 3

The sticky element has no top offset

Overflow is not the only sticky killer. A sticky element also needs an offset. Without top, bottom, left, or right, the browser does not know when the element should switch from normal flow to sticky behavior.

Broken code

No sticky threshold 
.toc {
  position: sticky;
}

Broken visual result

Sticky never starts
missing top
Table of contents

The element has sticky positioning but no threshold.

TOC scrolls
Sticky needs an offset. Without it, the sticky behavior has no trigger point.

Correct code

Top offset defined 
.toc {
  position: sticky;
  top: 24px;
  align-self: start;
}

Fixed visual result

Sticky has a trigger
top set
Table of contents

The sidebar sticks after it reaches the top offset.

TOC sticks
Always define the sticky offset before debugging deeper layout issues.
Error 4

The sticky parent is too short

Sticky also needs enough parent height to move through. If the parent wrapper ends quickly, the sticky element has nowhere to remain sticky. This can make the element appear to stick for a moment and then stop immediately.

Broken code

Parent ends too soon 
.short-section {
  display: grid;
  grid-template-columns: 1fr 260px;
}

.short-section .sidebar {
  position: sticky;
  top: 20px;
}

Broken visual result

No room to stick
short
Short section

The parent ends before sticky can be useful.

Short Stick stops fast
A sticky element cannot keep sticking beyond the boundary of its parent.

Correct code

Sticky parent has scroll room 
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}

.article-layout .sidebar {
  position: sticky;
  top: 20px;
}

Fixed visual result

Enough scroll room
stable
Article layout

The sticky sidebar has enough parent height to remain useful.

Long Stick stays useful
Sticky works best inside a parent that lasts long enough during scroll.
Premium pattern

A production-minded sticky layout pattern

A premium sticky layout separates page structure from visual clipping. The article wrapper stays overflow-visible. The sticky item has a clear top offset and starts at the top of its grid area. Decorative clipping is moved to inner components that do not control the sticky context.

Premium code

Sticky-safe structure 
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  overflow: visible;
}

.article-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

.media-card {
  border-radius: 24px;
  overflow: hidden;
}

Premium visual result

Sticky-safe layout
premium
Article system

The layout stays visible, the media clips inside, and the sidebar sticks.

Layout layer
overflow visible top set sticky can move
Visual layer
clip media round corners do not trap sticky
Premium sticky CSS keeps overflow rules away from the wrapper that sticky depends on.

Fast practical rule

If position: sticky fails inside overflow:hidden, remove overflow from the sticky parent chain first. Then add a real top value, make sure the parent has enough height, and move clipping to a child element that does not control the sticky layout.

Debug checklist

  • Inspect every parent of the sticky element.
  • Look for overflow:hidden, overflow:auto, or overflow:scroll.
  • Temporarily remove overflow from parent wrappers in DevTools.
  • Confirm the sticky element has a top or other offset value.
  • Check that the parent is tall enough for sticky movement.
  • Use align-self:start for sticky items inside grid or flex layouts.
  • Move rounded-corner clipping to an inner visual wrapper.
  • Avoid using overflow:hidden as a broad layout cleanup tool.
Best first moveDisable parent overflow rules one by one and watch whether sticky starts working.
Most common causeA layout wrapper uses overflow:hidden to hide a different visual issue.
Most sneaky causeThe sticky element works, but only inside a parent too short to notice.
Better mindsetSticky problems are usually parent-structure problems, not just sticky-element problems.

When overflow hidden is still the right choice

overflow:hidden is not evil. It is useful for clipping images, hiding decorative shapes, containing animations, and creating clean rounded components. The mistake is placing it on a wrapper that also controls sticky layout.

If the goal is visual clipping, put overflow on the visual child. If the goal is page structure, keep the layout parent as simple and open as possible. That separation keeps sticky behavior predictable without sacrificing clean UI.

The authority move is to use overflow intentionally. Do not apply it to a large page wrapper just because something somewhere is spilling out.

Why this bug survives desktop review

Sticky bugs often survive because the page looks fine before scrolling. A sidebar can sit in the right place at the top of the page, the CSS can look correct, and the layout can pass the first visual check. The failure only appears after scrolling through real content.

That is why sticky components need scroll testing, not just screenshot testing. Scroll slowly through the whole parent section, test with long and short content, and check whether a wrapper above the sticky element is secretly clipping the movement.

Related fixes that can help

Sticky overflow bugs often connect to fixed headers, z-index confusion, dropdown clipping, layout overflow, and responsive parent structure.

Fix position sticky not working If you need the broader sticky debugging checklist. Read this fix
Why is my fixed header covering content? If sticky or fixed header spacing is confusing the layout. Read this fix
Why is my dropdown getting cut off? If overflow clipping is also hiding menus or popovers. Read this fix
Fix overflow causing horizontal scroll If overflow rules were added to hide a sideways scroll problem. Read this fix
Why does transform break z-index? If the sticky element also appears behind other layers. Read this fix
Fix responsive design not working If the sticky layout changes behavior across breakpoints. Read this fix

Final takeaway

position: sticky fails inside overflow:hidden because sticky behavior depends on the parent and scroll context around it. A single overflow rule on an ancestor can make a perfectly valid sticky element behave like normal scrolling content.

Keep layout parents overflow-visible, move clipping to inner visual wrappers, define a clear sticky offset, and make sure the parent has enough scroll room. That turns sticky from a mysterious CSS trick into a predictable layout tool.

Want more fixes like this?

Browse more CSS positioning, sticky layout, overflow, and responsive debugging guides in the FrontFixer library.

CSS Fixes All Fixes