258

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>

JSFiddle showing the problem

3
  • Does this behavior persist across all browsers that support position: sticky or just one/some?
    – TylerH
    Jun 12, 2017 at 19:06
  • 2
    @TylerH I believe it's all browsers. It functioned like this in both Chrome and Safari.
    – bholtbholt
    Jun 12, 2017 at 19:52
  • Thanks. I can confirm the problem and solution occur in Firefox, too.
    – TylerH
    Jun 12, 2017 at 19:55

9 Answers 9

499
+250

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>

JSFiddle showing the solution

7
  • 56
    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
    Sep 28, 2018 at 16:31
  • @aequalsb Do you know of a way to get it to stick when scrolling the whole page? Mar 19, 2019 at 20:17
  • @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.
    – aequalsb
    Mar 19, 2019 at 21:04
  • 3
    I have no problem using it in Firefox 87. Works Correctly.
    – Shahriar
    Mar 3, 2021 at 12:16
  • 1
    @Ms. Siri, the answer works in Edge using both top: 0 and top: 100px. My Flexbox test does not use either overflow or height. You absolutely need top and align-self as the answer shows.
    – Goal Man
    Aug 23, 2022 at 3:26
84

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.

11
  • 1
    You also can't have overflow-x:hidden on the html element.
    – Samuel Liew
    Jan 23, 2020 at 6:03
  • 1
    Thanks a lot. I ALWAYS struggle with position sticky and I didn't knew about this condition until reading your reply. :) Jan 27, 2020 at 22:30
  • 1
    @SamuelLiew, yes you can have overflow-x: hidden; on the HTML element. Jan 28, 2020 at 22:50
  • 1
    OMG, this worked! In my case, the overflow hidden was from a parent three levels up from the sticky column. I have used the "section" layout helper from Bulma which apparently has overflow:hidden applied. Though, from my case both overflow-x and overflow-y should not be hidden, not just overflow-x.
    – alds
    Mar 18, 2021 at 20:37
  • 2
    I just tested it: You can have overflow-x: hidden; on the body tag, but you can't have overflow: hidden; on any other parent element. Feb 13, 2022 at 19:30
34

If you are using flex in the parent element use align-self: flex-start for the element which you want to make sticky.

position: sticky;
align-self: flex-start;
top: 0;
overflow-y: auto;
1
  • But when used align-self: flex-start, for example, top: 100px; is not working. How can I do that?
    – Siri
    May 25, 2022 at 16:16
16

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.

1
  • 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. Jan 7, 2020 at 19:24
8

For my situation, the align-self: flex-start (or justify-self: flex-start) solution does not work. I need to keep overflow-x: hidden as well since some containers swipe horizontally.

My solution required nested display: flex with overflow-y: auto to get the desired behaviors:

  • header can adjust height dynamically, which prevents playing with position: absolute or position: fixed
  • content scrolls vertically, constrained horizontally to the view width
  • sticky element can be anywhere vertically, sticking to the bottom of the header
  • other elements can slide horizontally
    • looks like the SO snippet tool can't render width on child elements to properly to demonstrate the horizontal slide, or maybe there's some other setting on my actual layout that makes it work...
    • note that a wrapper element that does nothing else is required to allow overflow-x: auto to work correctly in elements under a parent with overflow-x: hidden

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}
<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

8

Make sure flex-wrapper has assigned a height, and set the overflow value to auto. Then add "align-self: flex-start;" to the sticky element.

.flexbox-wrapper {
  display: flex;
  height: 600px;  //<- nessary,and don't assign with %
  overflow:auto;  //<-fix
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
  align-self: flex-start; // <-fix
}
<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

0
0

I made a makeshift flexbox table and had this problem. To solve it, I simply put the sticky header row outside of the flexbox, just before it.

0

Global solution/rule from my experience:

Do not put structures with sticky elements directly inside { display : flex } containers.

Instead (for flex layouts) put your tables/divs with sticky elements inside a flex sub-container (e.g. with { flex: 1 1 auto }, but without { display : flex } ), then everything should work as intended.

1
  • 2
    can you give an example ?
    – Imu Sama
    Jun 29, 2021 at 15:31
0

This worked for me but i have no idea if it's the issue you have. And my issue was that the centered content in flexbox was hidden when the viewport was too small

/*this is the wrapper of centered content*/
.section {
    overflow-y: auto;
    max-height: none;
    height: 100%;
    min-height: 100vh; /*optional, can be changed to anything*/
}
<div class="section">
   <div class="content">
      Some long content that is centered....
   </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.