How to fix the overflowing element

Hi,
This is a simple todo list created with HTML, CSS, Javascript : Todo List
The problem is when I add an item (a longer string) using the input box the layout breaks by overflowing text out of the box.

How to fix this ? :cry:
Appreciate your help.

1 Like

Hello @nimantha. Don’t worry, you can easily overcome this with the overflow CSS property.
What you should do:

  • add overflow: auto; to ul li {} style rules.
  • You may not see any changes. It is because you added justify-content: space-between. Change it to justify-content: flex-start.
  • Hurray! Now you can see a horizontal scrollbar and the overflowing problem is gone!

But, we have a slight problem here. The “X” button is now close to the list. You may need to fix it using margins or flex properties.

For more info about overflow property:

EDIT:

I found some problems in your HTML code. You only need to add the code that is to be added to the <body></body> tags in codepen. No need to add <!DOCTYPE html>. Also, if you want to add code that should be in the <head></head> tags, click on the settings icon at the top of the HTML code box. Now you will see a textarea where you can add codes that should be in the <head></head> tags.

Hope this helps you

1 Like

@paulsonstech Thank you very much for your reply. Actually I followed your solution and it worked exactly as you have explained.
But I find it’s bit weird to have a scroll bar to navigate an item in the list. Can’t we make it wrap the overflowing part into the next line ?
(Actually it is my mistake, I haven’t clearly mentioned what I need.)

1 Like

Found the solution! You can use word-break: break-all property.
More info about word-break property:

1 Like

Thank you @paulsonstech. :smiley:

1 Like