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

Janes

Here is your problem caniuse.com/#search=position%3A%20sticky – Warmonger

you set top:0 inside a scrolling container . the 0 coordonate scrolls within that container :) take it outside and the float element: jsfiddle.net/ab5u54hh/7 The thing about sticky is that it does interact within the flow and can pushed away when another container comes in place example: codepen.io/gcyrillus/pen/oxNLBO – Kalat

sticky is not absolute nor fixed, it is in the flow ang can get sticked to coordonates untill it has room to stay there ...., this is the tricky part .. it can even float .... so no wonder why it is a birt to handle at first ;) – Kalat

@AdamBuchananSmith Not relevant; OP is using Firefox as stated in the question, where position: sticky; is supported. – Chubby

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.

Finder

Your answer helped me thx. in my case I used max-height: calc(100vh - 80px) because I stuck it to an element 80px from the top. It also allowed me to scroll the longer content on the right side and still keep the list to the left sticky. – Pursy

for me position stikcy doesn't seen to be working in combination with overflow:auto for me – Riff

Three days. Three days I've fought this. Thank you. – Polyzoic