When many list are added, the page is obscured. How can I fix it?

Question

Thank you! Now, It works very well :D

---

I have a CSS problem. I use overflow: auto. But, when many list are added, the page is obscured. How can I fix it?
I used parcel-bundler. Here is my app. Link
Help me.

Answer 1

This is common when using flexbox to center a box vertically. You can fix it by adding margin: auto to .todo

.todo {
    background: #fff;
    min-width: 500px;
    width: 80%;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    margin: auto;
}

Answer 2

Remove you overflow:auto; from wrapper and set it to todo with max-height: 100%;

(wait I saw a problem created on your button then because it is loosing its position please use @AdamAzad answer)