I have the below HTML and CSS to be able to scroll down a list, and I cannot figure out why the overflow:hidden
and overflow-y: scroll
are not working on the ul.
I have tried all kinds of things such as taking out the div in between the .interaction-box
and the ul, and making interaction-box an id, but they did not work. The styling does work on the outer div but the title gets scrolled along with the list.
What am I missing?
.interaction-box {
width: 300px;
height: 360px;
border: 1px solid #ccc;
margin: 10px;
padding: 5px;
}
.interaction-box ul {
padding: 0px;
margin: 0px;
text-align: left;
overflow: hidden;
overflow-y: scroll;
}
.search-result {
list-style-type: none;
font-size: 17px;
padding: 5px;
}
<div className="interaction-box">
<div className="interaction-title">Top Search Results
</div>
<ul>
<li className="search-result">Result</li>
<li className="search-result">Result</li>
<li className="search-result">Result</li>
<li className="search-result">Result</li>
</ul>
</div>