Prevent scroll outside of the ul li dropdown

Question

I have a code like below

https://plnkr.co/edit/LG8cOx?p=preview

I am trying to make a dropdown of ul li, in which i can scroll and select the element by enter. Now if page height is more like in example i have given, the scrolls on the ul li scrolls the page also. How do i prevent this?

.newMarginBottom {
  min-height: 1100px;
  border:1px solid red;
}

Answer 1

You should use max-height property

.newMarginBottom {
  max-height: 1100px;
  border:1px solid red;
}

Update 1:

arrow keys issue can be resolved when you are using max-height:auto

Updated plunker