Chrome浏览器上的滚动条会删除CSS背景颜色

Question

我有一个指定高度的容器，里面的物品是堆叠的。默认情况下，我将溢出项设置为隐藏，一旦鼠标悬停，我启用容器以显示滚动条 HTML

#container {
  width: 200px;
  background-color: gray;
  height: 200px;
  overflow-y: hidden;
}
#container:hover {
  overflow-y: auto;
}
.item {
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: yellow;
}

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

它按照我的意愿工作，除了在Chrome浏览器上移出容器并滚动条消失后，滚动条区域的背景颜色被删除。这仅在Chrome上发生。任何的想法？

Demo

Answer 1

试试这段代码：

DEMO

#container:hover .item{
    width:auto;
}

.item {
    margin-top:2px;
    margin-bottom: 2px;
    background-color: yellow;
    width:200px;
}

您也可以使用100%代替200px。