CODEWITHSUNDEEP
htmlcss
sdvnksv
sdvnksv

Reputation: 9678

Sticky element inside a scrollable parent with fixed width

I have a scrollable container of a fixed width. Inside there is a containing element with a bunch of children with the first one being sticky.

.scrollable {
  position: relative;
  max-width: 200px;
  overflow-x: auto;
}

.containing {
  display: flex;
  width: 100%;
}

.sticky {
 position: sticky;
 left: 0;
}
<div class="scrollable">
  <div class="containing">
    <div class="sticky">Sticky</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
  </div>
</div>

The issue I am facing if that the sticky element goes off the screen too soon (mid-way in my example). I understand that this happens because the width of the containing element is automatically set to 100% of its parent (i.e. 200px in my example) so it kinda meets the opposite side of the containing block.

Is there a way to set the width of the containing block relative to its parent real width (i.e. 200px + everything hidden by the scroll area) without having to specify this width explicitly? CSS solution only would be great.

Upvotes: 1

Views: 1326

Answers (1)

Michael Beeson
Michael Beeson

Reputation: 2875

You'll notice that if you manually set the width of the .container to a much higher value, the sticky will remain stuck until that value is reached. The problem is you then might have a lot of white space after your contents.

To make this work you need your .containing div to have the same width as its contents, and usually the solution is to set it as inline-block display. But you want flex display. Easy! Use inline-flex.

Here's your snippet with the change and you'll see it's working.

.scrollable {
  position: relative;
  overflow-x: auto;
  width: 200px;
}

.containing {
display: inline-flex;
}

.sticky {
 position: sticky;
 left: 0;
 background: white;
}
<div class="scrollable">
  <div class="containing">
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="sticky">Sticky</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
    <div class="other">Other</div>
  </div>
</div>

Upvotes: 2

Related Questions