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.