Scrollbar "jumps" to another location with scrollable container when checkbox is clicked

Question

Here's my fiddle:

https://jsfiddle.net/85ef12m9/

I have this class

.scrollable{
    overflow: auto;
    max-height:400px;
}

and I have say a very long div with many elements:

<div class=scrollable>
  <div>
     <input type="checkbox" id="test0" />
     <label for="test0">Red</label>
  </div>
  <div>
     <input type="checkbox" id="test1" />
     <label for="test1">Red</label>
  </div>
  ....

When I click on an element say test51 my scrollbar jumps down to the element location as if it was not contained within the scrollable div. Any one has any idea why this is happening?

Answer 1

Turns out the answer is simple, simply add:

.scrollable{
    position: relative;
}

https://jsfiddle.net/161pnkzr/1/

I've also fixed your closing </div>'s in the jsfiddle (they were <div/> originally).

Reference: https://github.com/Dogfalo/materialize/issues/992