html - 溢出 :hidden and overflow-y: scroll on ul not working;

Question

我有下面的 HTML 和 CSS 可以向下滚动列表，我不知道为什么 overflow:hidden 和 overflow-y: scroll 是不在 ul 上工作。

我已经尝试了各种方法，例如取出 .interaction-box 和 ul 之间的 div，并使 interaction-box 成为一个 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>