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

Question

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

在 Edge 和 Firefox 中，它按预期工作。但是，在 Chrome (52) 中，当您将鼠标移出容器后，项目的宽度不会恢复到全宽。相反，space 保留在一侧，使填充看起来增加了。

使用 Chrome 元素检查器，如果您将鼠标悬停在开发工具 window 中的元素上，页面上的 div 工具提示和样式部分中的图表开发工具 window 显示不同的宽度，直到你 select 一个不同的元素并返回它（尽管这可能只是一个检查员没有更新的东西）：似乎通过检查器进行的任何涉及宽度的修改都会导致 Chrome 注意到并正确地重新调整宽度。例如，如果我通过检查器禁用 .item 样式的 width: 100%（将其设置回默认值：auto 并且也应该是全宽），它会在视觉上修复 divs 的宽度。当我通过检查器重新启用 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 填充来解决这个问题。不过，这只是一个 解决方法 。

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

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

Chrome width recalculating after removing scrollbar

css

cross-browser