CSS position: sticky and overflow

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.