CSS position: sticky and overflow

Question

Not able to find the solution for this. Basically, what I am trying to achieve is to have an element with the position: sticky appear with a scrollbar if there is more content then the browser height.

I don't want to use position: fixed as it will add additional pain in the neck.

Here is the example of how I would expect it to work:

.placeholder {    height: 200vh;    width: 50%;    float: right;  }    .child {    position: fixed;    top: 0;    bottom: 0;    height: 100%;    overflow-y: auto;  }

<div class="parent">    <div class="placeholder"></div>    <div class="child">      some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br /> some long text      <br />      </div>  </div>

Fiddle 1

Here is example with the position: sticky where the overflow doesn't do anything:

.placeholder {    height: 200vh;    width: 50%;    float: right;  }    .child {    position: sticky;    top: 0;    bottom: 0;    height: 100%;    overflow-y: auto;  }

<div class="parent">    <div class="placeholder"></div>    <div class="child">      some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />    some long text <br />        </div>    </div>

Fiddle 2

Any explanation / solution appreciated.

Make sure to use Firefox when testing

Answer 1

It's important to understand that sticky elements are first treated like a relative element and then a fixed element (see MDN). Therefore, you must first look at it like a relative element. If you give a height of 100% to a relative element, then nothing really happens unless its parent element has a defined height.

If you want your sticky element to have a scrollbar too, you must give it a meaningful height. I suggest using viewport height:

.child {   position: sticky;   top: 0;   bottom: 0;   height: 50vh;   overflow-y: auto; } 

For the record - the "stickiness" doesn't appear to be working as expected in either FF or Safari in terms of the element becoming fixed during scrolling. I'm not concerning myself with that - just focusing on the overflow issue.