My position: sticky element isn't sticky when using flexbox

position: sticky not working with overflow: scroll
css position: sticky not working
position: sticky alternative
position: sticky flexbox
position: sticky vs fixed
position: sticky horizontal scroll
position: sticky relative to parent
position: sticky support

I was stuck on this for a little bit and thought I'd share this position: sticky + flexbox gotcha:

My sticky div was working fine until I switched my view to a flex box container, and suddenly the div wasn't sticky when it was wrapped in a flexbox parent.

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

Since flex box elements default to stretch, all the elements are the same height, which can't be scrolled against.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it.

Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other browsers except for Firefox have some issues with position: sticky tables.

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

Create a sticky sidebar, : relative within its parent, until a given offset threshold is met in the viewport. Position sticky isn’t a new thing, but the support is now so great that I started to use it, so what’s position sticky? Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned. – Mozilla Foundation

In my case, one of the parent containers had overflow-x: hidden; applied to it, which will break position: sticky functionality. You'll need to remove that rule.

No parent element should have the above CSS rule applied to it. This condition applies to all parents up to (but not including) the 'body' element.

Stick your landings! position: sticky lands in WebKit, Sticky Item — is the element that we defined with the position: sticky styles. The element will float when the viewport position matches the position  An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning.

You can also try adding a child div to the flex item with the contents inside and assign position: sticky; top: 0; to that.

That worked for me for a two column layout where the contents of the first column needed to be sticky and the second column appear scrollable.

Difference between position:sticky and position:fixed?, Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold,  The reason for that is that when an element is given the position: sticky style, the sticky item’s container is the only area in which the sticky item can stick. The item doesn’t have any elements

How can I make a div stick to the top of the screen once it's been , A quick guide on how to use the position: sticky property in CSS to make elements become static when the page is scrolled to a specified point. Ma position: sticky element n'est pas sticky lors de l'utilisation de flexbox je suis bloqué sur ce pour un peu et j'ai pensé partager ce position: sticky + flex zone de gotcha: Mon collant div fonctionnait bien, jusqu'à ce que j'ai changé mon point de vue à un flex de la boîte de conteneur, et tout à coup le div n'était pas collante

CSS Position Sticky - How It Really Works! - Elad Shechter, So in case you run into a situation where position: -webkit-sticky isn't working, an heads-up: check to see if the element you want to position as  If your element isn't sticking as expected the first thing to check are the rules applied to the container. Specifically, look for any overflow property set on the parent. You can't use: overflow: hidden, overflow: scroll or overflow: auto on the parent of a position: sticky element.

Help CSS position sticky doesn't work [SOLVED], This happens because the sticky element is meant to stick/scroll within the height of a container. Checking If A Parent Element Is A Flexbox. If  .header has a height of 150px. .navbar has a height of 20px. When the user scrolls, I want .navbar to stick at the top. So I went to the CSS and set position:sticky and top:0. But this didn't work. I initially thought that firefox is not supporting position:sticky, but that's not the case because I was able to see a working demo of it.

Comments
  • Does this behavior persist across all browsers that support position: sticky or just one/some?
  • @TylerH I believe it's all browsers. It functioned like this in both Chrome and Safari.
  • Thanks. I can confirm the problem and solution occur in Firefox, too.
  • this only works when scrolling within the containing flex element -- when scrolling the entire window it does NOT stick (at least in Firefox) -- so for those who are experiencing contradictory behavior it is more likely you're experiencing contradictory expectations (like i was)
  • @aequalsb Do you know of a way to get it to stick when scrolling the whole page?
  • @Douglas the question is misleading because it suggests the problem is with flexbox but the problem has more to do with containing the sticky element. look at this fiddle: jsfiddle.net/9y87zL5c where the SECOND red box works as expected but the FIRST red box not stick -- so... this is not related to flexbox (thus contradictory expectations)... ALSO... i added a bunch of jabberwocky to see results in a more accurate manner.
  • It works fine for me in firefox.
  • You also can't have overflow-x:hidden on the html element.
  • Thanks a lot. I ALWAYS struggle with position sticky and I didn't knew about this condition until reading your reply. :)
  • @SamuelLiew, yes you can have overflow-x: hidden; on the HTML element.
  • @RaphaelAleixo I'm glad I could help :)
  • Totally agree, this is the most simple and reliable option I could find. This way you will also be able to control when to stop sticking by controlling the height of the container.