[SOLVED] Why overflow property is not working?

Question

In line 12 of CSS tab I've applied overflow-x to hidden but why it's not working?
Here's the code link:
https://code.sololearn.com/W2e9LJLyQ4sn/?ref=app

Answer 1

because it was applied to body, and body have special behavior wich prevent it for using overflow ^^
you must wrap your body content in a div to make it work (and apply css properties on it):
https://code.sololearn.com/WRM1YmDat3OM/?ref=app

Answer 2

Some time this happens to my code also, 🙁

Answer 3

visph Thanks for the help brother. I've been trying to fix this issue for like 2 hours 😵
And yes, I've wrapped all the content in a container and it worked fine, just wants to know why it's not working with body tag.
Thanks again!

Answer 4

visph Actually I've already mentioned that the other code has "similar output" xD
But I guess you are right
This bug(or whatever) really drove me to madness 😵
I'll never apply overflow property to the body tag, never!
Anyways, my problem is solved. Thanks a lot for the help 😁🙏

Answer 5

visph But wait!! I've a similar code where overflow-x property is working fine in body tag
For some reason it's working in SPCK Editor (An Android code editor) but not on SoloLearn

Answer 6

it could be due to the fact that in this code you have some elements wich are translated far away at right side: so body width grow according to them (to be able to display them)... maybe your other code has not such translated elements?
anyway, html behavior is sometimes hard to understand... so much that even the specifications could have some lacks and implementations in different engines (browsers) could sligthly differ ^^
without talking about "quirks modes", and other html permissivity wich involves browsers to display invalid html "as they can, in any case" (meaning by changing your invalid code) ;P

Answer 7

maybe the other editor do some modification to your html code before displaying it... such as wrapping it in a div, even if you didn't notice that ^^

Answer 8

visph Maybe you are right, but the code which I've shared here was not working on SPCK Editor
But the other code with similar output with overflow-x property applied to body tag was working fine in that same editor
I'm really confused about this bug
Idk if it's even a bug or not but it's really confusing