A query in CSS overflow porperty

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

The height if the last element IS* way more than it should be!.. — Nav
– Nav, Commented Apr 27, 2021 at 6:40

shiva rao · Accepted Answer · 2021-04-27 07:01:43Z

2

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

answered Apr 27, 2021 at 7:01

shiva rao

17210 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sigurd Mazanti · Accepted Answer · 2021-04-27 06:55:39Z

0

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

answered Apr 27, 2021 at 6:55

Sigurd Mazanti

2,4041 gold badge12 silver badges32 bronze badges

1 Comment

Nav Over a year ago

No thats not what I was asking for. It was about the overflow property. As answered by @shiva rao

Collectives™ on Stack Overflow

A query in CSS overflow porperty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related