Scroll bar affecting width of div

Question

I am currently trying to implement a time selector like this http://jsfiddle.net/roberttang30/AzRja/.

It is styled like this:

'overflow' : 'visible',
'list-style': 'none',
'position': 'absolute',
'font-size': '115%',
'top': '15%',
'margin-top': '1.7em',
'margin-left': '-25%',
'left': '50%',
'width': '50%',

It works fine but I would now like to add the ability for it to scroll. The problem is that when I enable the scroll bar it narrows the width of the list (which is containing the times). http://jsfiddle.net/roberttang30/GhvYG/

I am currently using slimScroll but I get the same problem with a normal scroll bar.

If think the problem could be something to do with the lines which are used to float the div in the middle :

'margin-left': '-25%',
'left': '50%',
'width': '50%',

Thank you for you help.

Answer 1

Set

.box {
padding-right:0;
}

Remove

.dropdown{
 overflow:hidden
}

Padding was pushing the scrollbar away from the right. Why .dropdown caused the box to be less wide is unclear to me.