overflow-x on the body element does not work
Hey!
I have been working on this project:
https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/
(You should view it in responsive mode at 375px preferably to see the issue)
I started to work on the mobile view first, where I have a hero section that has two decorative svgs that are positioned absolute where their parent has a position relative, and when I finished I noticed that I have horizontal scrolling, I have tried to set the body width to 100% and set overflow-x: hidden on the body but the horizontal scrolling was still there, the only solutions I found is to set both body and HTML property of overflow to hidden, or wrap everything inside the body in a div and give it overflow: hidden.
My question is why this behavior occurs because I have always thought that if I set overflow-x: hidden on the body or the HTML element with hide any overflowing content
Thanks for the help
I have been working on this project:
https://64401877a3e55700863fec85--super-daffodil-7196e0.netlify.app/
(You should view it in responsive mode at 375px preferably to see the issue)
I started to work on the mobile view first, where I have a hero section that has two decorative svgs that are positioned absolute where their parent has a position relative, and when I finished I noticed that I have horizontal scrolling, I have tried to set the body width to 100% and set overflow-x: hidden on the body but the horizontal scrolling was still there, the only solutions I found is to set both body and HTML property of overflow to hidden, or wrap everything inside the body in a div and give it overflow: hidden.
My question is why this behavior occurs because I have always thought that if I set overflow-x: hidden on the body or the HTML element with hide any overflowing content
Thanks for the help
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
