Overflow hidden with nested overflow scroll not working

All you need to do is provide height to your #scroller

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

Demo

---

As per your point - In my real world problem there is multiple s in #parent so I can't give #scroller a height.

There is no other way you can make it scrollable without assigning a height to it. Without that, it will stretch until the child element ends which won't make your wrapper scrollable.

You can use JavaSript here, to calculate the height on runtime and append it to the element.

There actually is a CSS-only answer in the comments with display: flex. See:

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}