A query in CSS overflow porperty - html

Question

I am working on a TODO kind of web app. And I have an issue
<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>
There are 2 components first is the the div with class todo-list and second is a form.
now whenever I type something in the input feild and click add, It should be added as item in todo-list div. Which I have done using node and express
Now the issue is since this is dynamic, Initially there will be no Items in div with class todo-list and the form with input will be on the top. And as we go on adding items, They should be added into the todo list div. And it so happens that after a certain number of items added, the height of the todo list increases and crosses the viewport height.
But what i want is, until there are 5 items in the todo-list it is fine, But as soon as 6th item gets added the scroll bar should appear.
So i wrote the following CSS code for todo-list div
.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;
}
But the overflow property doesnt work untill a height property is given to that div.
But if a certain height(say height equal to that of 5 items is given to the todo list div) then this problem occurs:
That is the height of the last element if way more than it should be!..
Can some one please help

Answer 1

try providing the max height property
.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;
}

Answer 2

You need to change your height styling from a fixed number to percentage.
If you think your bottom form element is too close to your search bar, give it some 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;
}