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.
stretch, but Grid and Flexbox can still apply it.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
The sidebar stretches with the grid row.
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
The sidebar starts at the top and can stick naturally.
align-items:start when the grid items should not stretch vertically.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
The panel stretches with the flex row.
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
The filter panel keeps its own height and sticks cleanly.
align-items:flex-start when a sticky flex child should keep natural height.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
The whole column is sticky instead of the compact card.
Correct code
Sticky on inner card.aside-column {
align-self: start;
}
.aside-card {
position: sticky;
top: 24px;
padding: 20px;
}Fixed visual result
The column lays out normally while the card sticks.
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
The parent ends before sticky can do much.
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
The main content creates enough scroll range.
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
The layout aligns to the top, the card sticks, and mobile returns to normal flow.
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:stickyand a realtopvalue. - Inspect the grid or flex parent for default stretch behavior.
- Add
align-items:startto the grid or flex container. - Try
align-self:starton 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.
align-items:start to the grid or flex container and re-test scroll.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.
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.