the contents of a div clip outside of it's boundaries

I have a div here with a bunch of buttons inside and this CSS code:

#shop {
  height:calc(45% - 15px);
  overflow:scrollable;
}

however, the overflow will not work properly. Despite the fixed height, the buttons always spill out underneath. Ideally, this would instead be something you are able to scroll through. Here is a jsfiddle: https://jsfiddle.net/38d1rc06/1/

>Solution :

For begin – https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
Use a scroll, but not "scrollable".

And second peace inner content do not wrap – #shop {white-space: nowrap}.