滚动条出现时防止内容缩小

Question

当用户悬停DIV时，我正在显示滚动条。我的问题是当滚动条出现时，内容变得更窄。

查看YouTube的菜单（桌面网站），了解我在寻找的内容。

这是一个示例代码，link to codepen可以看到它正常工作。

.scrollable{
    width: 400px;
    height: 400px;
    margin: 12px auto;
    border: solid 1px black;
    overflow: hidden;
    &:hover{
        overflow-y: auto;
    }
}

.content{
    margin: 0 auto;
    width: 300px;
    height: auto;
}

Answer 1

下面：

.scrollable{
  width: 400px;
  height: 400px;
  margin: 12px auto;
  border: solid 1px black;
  overflow: hidden;
  &:hover{
      overflow-y: scroll;
  }

}

您只需在悬停时设置overflow-y: scroll，以便它不会移动您的内容。