Scroll in absolute item with body overflow: hidden
Hey,
I have a body with a fixed sidebar and a absolute main section.
Both components are in the body which has a
width of 100vw and a height of 100vh.
The body has also overflow set to hidden.
My Problem is now that when I am in the mobile view, I can scroll like 50vh further down and 50vw further to the side.
when returning my min-width property from the main element, everything is working.
But I need the min-width because else it looks really bad.
Has anyone any idea?7 Replies
sounds like
min-width is he culprit since it stops it from getting smaller than that size.
Is there a reason you need the main to be absolute?
I'd suggest sharing a codepen or something so we can see what's going on, and potentially offer alternative approachesThanks for replying!
It is not nice when living an another timezone 😄
Because my Sidebar is fixed and changes in size when opening or closing it, I think that absolute is the best way. The min-width is needed because else it looks really bad when the main element is only 100px wide when the sidebar is fully open.
I will try to create a codepen.
I tried copying the code into a codepen but there is not problem than. Like on my website there is but in codepen not 😄 https://codepen.io/Konesky/pen/eYLNRjq?editors=1100
I am not sure if I should send you the Link to my site, because it is going into the nsfw direction....
I also found out that when I set the left of the main element from 250px (when the sidebar is extended) to 0, I can't scroll anymore.
If the sidebar is
position: fixed there is no need for the main to be position absolute, the sidebar is already out of the flow.
Looking at the codepen, the position absolute isn't really doing anything anyway?
to me, if someone is on mobile, it would make more sense for the sidebar to cover the main area, rather than have it 2 columns. If you're on a small screen, you just don't have the space for both.Here's an update on that codepen, using
position: sticky instead of fixed for the nav, and then using flex-grow: 1 on the main so that it takes up the available space.
With that, we can turn off the overflow hidden on the body, and remove a lot of other things (i've left them commented out so you can see what I removed)
https://codepen.io/kevinpowell/pen/JjadaOJ?editors=1100Thanks, but now I have some problems. I still would like to have min-width in the main element and now it is not that easy to slide out the sidebar so it is out of view.
I thought I would not dislike CSS, but now.... I just tried again removing the min-width but now it is also not working with it :C
I see, the problem accursed when part of the absolute element is outside of the view. It gets outside when I increase the left property. Have you ever had something like this?
YES, I found a solution... Just changing the absolute to fixed...