Html CSS溢出特性中的一个查询

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

<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指定height属性之前不起作用。 但是，如果某个高度（例如，todo list div的高度等于5个项目的高度），则会出现以下问题：

这是最后一个元素的高度，如果远远超过它应该的高度

---

有人能帮忙吗？

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

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;
}

---

尝试提供“最大高度”属性

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

---

如果最后一个元素的高度*远大于它应该的高度！。。不，那不是我想要的。这是关于溢出属性的。正如@shiva rao所回答的

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