Why isn’t position:sticky with left:0 working inside a scrollable container?

by

Add border to better see the issue which is related to the use a block level element and the restriction of width:100% (not the one your are setting which is useless but the default behavior of block elements)

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}
<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Consider an inline level element using inline-flex to solve the issue. Add min-width:100% to make sure you cover at least 100% of width if the content is small.

.container {
  overflow-x: scroll;
}

.row {
  display: inline-flex;
  min-width: 100%;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}
<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Some related questions:

Nested sticky element with zero left does not sticky

Why is my element not sticking to the left when using position sticky in css?

More Related Contents:

  1. ‘position: sticky’ not working when ‘height’ is defined
  2. Targeting flex items on the last or specific row
  3. Can’t scroll to top of flex item that is overflowing container
  4. Fill the remaining height or width in a flex container
  5. How to vertically align text inside a flexbox?
  6. How does the “position: sticky;” property work?
  7. Equal height children of flex items
  8. How to specify line breaks in a multi-line flexbox layout?
  9. How to Right-align flex item?
  10. How to remove the space between inline/inline-block elements?
  11. flex container min-height ignored in IE
  12. Maintain image aspect ratio when changing height
  13. float does not work in a flex container
  14. How can I have two fixed width columns with one flexible column in the center?
  15. How can I make my flexbox layout take 100% vertical space?
  16. Is there a way to remove a div but keep its elements?
  17. All widths set to width of widest element
  18. Make a nav bar stick
  19. flex-grow not working in column layout
  20. CSS – How to have children in different parents the same height?
  21. Why does flexbox stretch my image rather than retaining aspect ratio?
  22. How to make a sticky footer using flexbox in IE11?
  23. Height of flex container not working properly in Safari
  24. Flexbox, z-index & position: static: Why isn’t it working?
  25. Why does flex-box work with a div, but not a table?
  26. How to make a flex item not fill the height of the flex container? [duplicate]
  27. Sticky footer with flexbox
  28. Alignment of content vertically in adjacent flexbox containers
  29. Making a flex item float right
  30. Flex elements ignore percent padding in Firefox

Leave a Comment