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

by

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

More Related Contents:

  1. Why bottom:0 doesn’t work with position:sticky?
  2. If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
  3. ‘position: sticky’ not working when ‘height’ is defined
  4. What are `scrolling boxes`?
  5. pure CSS multiple stacked position sticky?
  6. Make a div span two rows in a grid
  7. Better way to set distance between flexbox items
  8. What’s the difference between align-content and align-items?
  9. How does flex-shrink factor in padding and border-box?
  10. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  11. Margin collapsing in flexbox
  12. Every item to have the same width as the widest element [duplicate]
  13. Flexible box model – display : flex, box, flexbox? [duplicate]
  14. Set Google Maps Container DIV width and height 100%
  15. position: absolute without setting top/left/bottom/right?
  16. Prevent flex item from exceeding parent height and make scroll bar work
  17. Are flex items block level element?
  18. Bootstrap change order of columns
  19. Flex auto margin not working in IE10/11
  20. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  21. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  22. The difference between flex:1 and flex-grow:1
  23. Absolute positioning ignoring padding of parent
  24. How to control number of items per row using media queries in Flexbox?
  25. Vertically center items with flexbox
  26. Force sidebar height 100% using CSS (with a sticky bottom image)?
  27. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  28. Horizontal masonry layout with flexbox CSS only [duplicate]
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment