CSS overflow-x: hidden not working when overflow: hidden worked

Question

How would I use overflow-x: hidden on the body, but keep overflow-y: scroll?

I just put overflow: hidden on the body, and it worked (no scrolling on either axis). But when I try to specify an axis, like overflow-x: hidden, suddenly both axes become scrollable.

This should apply only to the body- I don't want to wrap anything inside a "wrapper" div.

This works, but cause both axes to not scroll:

body {
    overflow: hidden;
}

This causes both axes to scroll:

body {
    overflow-x: hidden;
}

The only thing inside the body is an absolutely positioned element.

Please show code, also a live example would be great

Andrew Li
– Andrew Li

2016-07-02 00:38:54 +00:00
Commented Jul 2, 2016 at 0:38 — Andrew Li
– Andrew Li, Commented Jul 2, 2016 at 0:38
Your full code, for context

Andrew Li
– Andrew Li

2016-07-02 00:42:15 +00:00
Commented Jul 2, 2016 at 0:42 — Andrew Li
– Andrew Li, Commented Jul 2, 2016 at 0:42

Tyler Cheves · Accepted Answer · 2016-07-02 01:10:25Z

2

I've concluded that this is probably a bug in WebKit. According to this link:

https://css-tricks.com/findingfixing-unintended-body-overflow/

the author mentions this exact problem of specifying an axis inside body. It looks like you would have to use a wrapper div, as mentioned in other questions.

answered Jul 2, 2016 at 1:10

Tyler Cheves

315 bronze badges

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

Collectives™ on Stack Overflow

CSS overflow-x: hidden not working when overflow: hidden worked

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related