强制滚动条显示内容是否溢出

Question

我有这个div与class feedback-rounds-container。它是固定的高度和宽度，有时内容溢出它。为了使用户明白，我强制显示滚动条，覆盖浏览器设置，但现在它始终显示，即使内容没有溢出div。

如果内容溢出，我想让它一直显示，但如果内容没有溢出，我根本不希望它显示。有没有办法做到这一点（希望在纯CSS中）？

.feedback-rounds-container {
  overflow-y: scroll;
  height: 80px;
  width: 200px;
  border: solid 1px #ddd;
}
.feedback-rounds-container::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px; 
}
.feedback-rounds-container::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); 
}

<div class="feedback-rounds-container">Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.</div>

<br>

<div class="feedback-rounds-container">Content here</div>

Answer 1

使用auto代替scroll;如果内容溢出，这将显示垂直滚动条 。

.feedback-rounds-container {
  overflow-y: auto;
}