内容がオーバーフローした場合にスクロールバーを表示させます

Question

私はクラスfeedback-rounds-containerでこのdivを持っています。これは固定された高さと幅であり、コンテンツがオーバーフローすることがあります。ユーザーにはっきりさせるために、スクロールバーを表示させてブラウザ設定をオーバーライドしますが、コンテンツが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; 
}