Make child element position:sticky

Question

I am asking if it is possible to have a sticky element with a dynamic element height. And that the sticky element orientates itself of the parents height ? And to have only one scrollbar and this only in CSS. For what i have read sticky normally needs a defined height and can not handle dynamic heights.

But maybe someone knows a trick how to achive what i am looking for.

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  overflow: auto;
  display: flex;
  border-top: solid 1px black;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}

<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

Does this answer your question? ["Position: sticky;" not Working CSS and HTML](https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html) — AmitJS94, Jul 09 '20 at 16:11

score 1 · Accepted Answer · answered Jul 09 '20 at 16:08

remove overflow and adjust the alignment:

.wrapper {
  max-height: 40vh;
  overflow: auto;
  border: solid 1px black;
}
.innerWrapper {
  /*overflow: auto;*/
  display: flex;
  border-top: solid 1px black;
  align-items:flex-start;
}
.sticky{
  flex-basis: 50%;
  position: sticky;
  top: 0;
}

<div class="wrapper">
  <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
    <div class="innerWrapper">
    <div class="sticky">
      I should be sticky
    </div>
    <div class="content">
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
      I am scrollable<br>
    </div>
  </div>
</div>

Related question for the overflow issue: Why is 'position: sticky' not working with Core UI's Bootstrap CSS

For the alignment, you should note that by default its strech so the sticky element is already full height

More details: Why bottom:0 doesn't work with position:sticky?

Yes this is exactly what i was looking for. In the mean time i got it working myself but this is way better then how it got it working. — Jan Ackermann, Jul 09 '20 at 17:20

Make child element position:sticky

1 Answers1