html - 添加带有搜索栏的 元素并防止从父 div 元素溢出

Question

我希望能够让用户不断地将条目添加到搜索栏中，并且这些条目不会溢出带有类 kitchen 的父 div 容器。我想知道是否可以限制可以添加多少 li 元素，以阻止它溢出 div 父元素。

我想知道这是否完全可行，我需要用什么语言来做，或者是溢出:滚动我可以设置的唯一属性来处理这个问题。

ul{
    list-style-type: none;
    height: 300px;
}

li{
    float: left;
    margin-bottom: 2px;
    display: inline-block;
    color: #FFFFFF;
    border: solid 2px #FFFFFF;
    padding: 1rem;
    background: #222222;
    width: 50%;
    border-radius: 10px;
}

.fa-check-circle{
    color: green;
}

.fa-edit{
    color: red;
}

.row {
    position: relative;
    display: flex;
    flex-direction: row;
}

.kitchen{
    color: black;
    background: url('../img/refrigerator.jpg');
    background-size: cover;
    background-position: 50%;
    border: solid 5px #FFFFFF;
    padding: 3rem;
    height: 100%;
}

.col{
    width: auto;

}

.lunchbox{
    background: url('../img/lunchbox.jpg');
    background-size: cover;
    background-position: 50%;
    display: inline-block;
    border: solid 5px #FFFFFF;
    padding: 3rem;
    width: 100%;
    height: 100%;
}

.column{
    flex: 1;
    margin-top: 3rem;
    margin-right: 3rem;
    margin-left: 3rem;
    height: 600px;
}

<div class="kitchen">
  <ul class="col">
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Apple<span class="far fa-check-circle"></span><span class="far fa-edit"></span></li>
    <li>Cheese <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Cereal <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Ice Cream <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Steak <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
    <li>Orange <span class="far fa-check-circle"></span>      <span class="far fa-edit"></span></li>
  </ul>

  <button type="button" class="clear_btn">clear items</button>

</div><!--kitchen-->

Answer 1

我现在看到的潜在解决方案:1) Overflow: scroll/overflow:hidden 在你的 CSS 样式表中2) 分页。 显示例如。一次显示 10 个结果，为了显示更多用户将不得不单击“显示更多”或多个“页面”。因此，如果有 23 条记录，则用户将看到按钮“1”、“2”和“3”。每个按钮将显示不同的记录。每个 View 最多 10 个。3)用JS

限制显示的元素个数