CSS 溢出属性中的查询

Question

我正在开发一种 TODO 类型的网络应用程序。我有一个问题

<div class="todo-list">
        <div class="item">
            <p> Buy Raw materials </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <div class="item">
            <p> Cook food </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <div class="item">
            <p> eat food </p>
            <form action="/" method="POST">
                <button type="submit">X</button>
            </form>
        </div>
        <form action="/" method="post" class="add-item">
           <input type="text" name="newItem" id="newItem" placeholder="New item" autocomplete="off">
           <button type="submit">Add</button>
        </form>

有两个组成部分，第一个是 div 和 class 待办事项列表，第二个是表格。

现在每当我在输入字段中输入内容并单击添加时，它应该作为项目添加到待办事项列表中 div。我使用 node 和 express

现在的问题是，因为这是动态的，最初 div 中没有项目和 class 待办事项列表，带有输入的表单将位于顶部。随着我们继续添加项目，它们应该被添加到待办事项列表中 div。而恰好在添加了一定数量的项目后，todo列表的高度增加并越过视口高度。

但我想要的是，待办事项列表中有 5 项之前没问题，但是一旦添加了第 6 项，滚动条就会出现。

所以我为 todo-list div

编写了以下 CSS 代码

.todo-list{
    margin-top: 1rem;
    background-color: #f1f1f1;
    width: 100%;
    height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;

}

但是溢出属性直到 div 的高度属性才生效。但是如果给todo列表设置了一定的高度（比如说等于5个item的高度div）就会出现这个问题：

这是最后一个元素的高度，如果超出应有的高度！..

有人能帮忙吗

Answer 1

您需要将身高样式从固定数字更改为百分比。如果您认为底部表单元素离搜索栏太近，请给它一些 margin-bottom

.todo-list {
    margin-top: 1rem;
    background-color: #f1f1f1;
    /* change this */
    width: 100%;
    height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;
}

Answer 2

尝试提供最大高度属性

.todo-list {
    margin-top: 1rem;
    background-color: #f1f1f1;
    /* change this */
    width: 100%;
    max-height: 425.200px;
    border: 2px solid grey;
    border-radius: 16px;
    box-shadow: 2px 2px 4px 1px gray;
    overflow: auto;
}

CSS 溢出属性中的查询

A query in CSS overflow porperty

html

css

overflow