CODEWITHSUNDEEP
htmlcsssticky
Jan Ackermann
Jan Ackermann

Reputation: 59

Make child element position:sticky

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>

Upvotes: 0

Views: 1957

Answers (1)

Temani Afif
Temani Afif

Reputation: 272703

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?

Upvotes: 2

Related Questions