css - 删除滚动条后重新计算 Chrome 宽度

Question

我有一个容器，里面有一个元素列表，我希望滚动条只有在鼠标悬停在容器上时才可见。到目前为止，我已经通过使用 overflow:hidden 和 :hover overflow-y:auto 实现了它 - 请参见此处:https://jsfiddle.net/v4jrakak/

在 Edge 和 Firefox 中，它按预期工作。然而，在 Chrome (52) 中，当您将鼠标移出容器后，元素的宽度不会恢复到全宽。取而代之的是，侧面保留了一个空间，使填充看起来像是增加了。

使用 Chrome 元素检查器，如果您将鼠标悬停在开发工具窗口中的元素上，页面上的 div 工具提示和开发工具窗口样式部分中的图表会显示不同的宽度，直到您选择不同的元素并且回到它(尽管这可能只是检查员没有更新东西): 似乎通过检查器对宽度进行的任何修改都会导致 Chrome 注意到并正确地重新调整宽度。例如，如果我通过检查器禁用 .item 样式的 width: 100%(将其设置回默认值:auto 并且也应该是全宽的)，它会在视觉上修复 div 的宽度。当我通过检查器重新启用 width:100% 规则时，没有任何变化，因为此时宽度是正确的。

这是 Chrome 的错误吗？有什么办法可以在删除滚动条后正确地重新调整宽度？

*,
*:before,
*:after {
  box-sizing: border-box;
}
.wrapper {
  position: relative;
  width: 460px;
  border: 1px solid black;
  padding: 0 8px;
  margin: 0;
  height: 600px;
  overflow: hidden;
}
.wrapper:hover {
  overflow-y: auto;
}
.item {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: gray;
  margin: 8px 0;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

您可以向 .wrapper:hover 添加一个similar padding 来解决这个问题。不过，这只是一个解决方法。

*,*:before,*:after {box-sizing:border-box;}

.wrapper{
  position:relative;
  width:460px;
  border:1px solid black;
  padding: 0 8px;
  margin: 0;
  height: 600px;
  overflow:hidden;
}

.wrapper:hover {
  overflow-y:auto;
  padding-right:7px;
}

.item {
  position: relative;
  width:100%;
  height: 150px;
  background-color: gray;
  margin: 8px 0;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>