Below is a simplified version of my code that illustrates the issue I'm facing. I am trying to enclose all the elements within a box and enable scrolling for the .content section. So far, all my attempts at resolving this problem have been unsuccessful.
.container {
top: 13.5px;
left: 16px;
width: 377px;
height: 140px;
position: absolute;
right: auto;
bottom: auto;
border: 1px solid red;
}
.content {
overflow-y: auto;
}
.title {
height: 30px;
border-bottom: 1px solid black;
}<div class="container">
<div class="title">
<h2>Title</h2>
</div>
<div class="content">
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
<div><span>Hello</span></div>
</div>
</div>