溢出：隐藏和溢出-y：在ul上滚动不起作用；

Question

我使用下面的HTML和CSS可以向下滚动列表，但无法弄清楚为什么overflow:hidden和overflow-y: scroll在ul上不起作用。

我已经尝试过各种方法，例如.interaction-box将ul和ul 之间的div取出，并将交互框设为id，但它们没有用。样式确实适用于外部div，但标题与列表一起滚动。

我想念什么？

.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

您想给自己ul一个高度，以便在开始使元素可滚动时提供参考。如果没有高度，它将永远持续下去，并且滚动条将永远不会被应用。

.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>