移除滚动条后重新计算Chrome宽度

Question

我有一个容器，里面有一个项目列表，我希望滚动条仅在鼠标位于容器上时才可见。到目前为止，我已使用overflow:hidden和:hover overflow-y:auto实现了这一目标 - 请参阅此处：https://jsfiddle.net/v4jrakak/

在Edge和Firefox中，它按预期工作。但是，在Chrome（52）中，当您将鼠标移出容器后，项目的宽度不会再增长回到最大宽度。相反，一侧留有空间，使其看起来像填充物增加。

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

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

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以向String添加类似填充以修复此问题。这只是一个解决方法。

＆＃13;

＆＃13;

Object

＆＃13;

.wrapper:hover

＆＃13;

＆＃13;

＆＃13;