I have a container with a list of items inside of it, and I'd like the scrollbar to only be visible when the mouse is over the container. So far, I've achieved it by using overflow:hidden and :hover overflow-y:auto - see here: https://jsfiddle.net/v4jrakak/
In Edge and Firefox, it works as expected. In Chrome (52), however, the widths of the items don't grow back to full width after you mouse out of the container. Instead, a space remains on the side making it look like the padding has increased.
Using the Chrome element inspector, if you mouse over the element in the dev tools window, the div's tooltip on the page and the diagram in the styles part of the dev tools window show different widths, until you select a different element and come back to it (though that might just be an inspector not updating thing): 
It also seems like any modification through the inspector that touches the width, will cause Chrome to notice and readjust the width correctly. For example, if I disable the width: 100% on .item style through the inspector (which sets it back to its default: auto and should also be full wide) it fixes the divs' widths visually. And when I re-enable the width:100% rule through the inspector nothing changes because the widths are correct at that point.
Is this a Chrome bug? Is there any way I can get the widths to correctly readjust after the scrollbar is removed?