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

Question

我有这个 div 类 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;
}