CSS背景颜色被Chrome浏览器上的滚动条擦除

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。