Overflow:hidden and overflow-y: scroll on ul not working;

Question

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>

Answer 1

You want to give your ul a height so it has a reference when to start making the element scrollable. If it has no height, then it will just go on forever and the scrollbar will never be applied.

.interaction-box {
  width: 300px;
  height: 360px;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 5px;
}

.interaction-box ul {
  height: 200px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  overflow: hidden;
  overflow-y: scroll;
}

.search-result {
  list-style-type: none;
  font-size: 17px;
  padding: 5px;
}

<div class="interaction-box">
  <div class="interaction-title">Top Search Results</div>
  <ul>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
    <li class="search-result">Result</li>
  </ul>
</div>