Streaming live at 10am (PST)

"Overflow hidden" breaks fixed positioning


I have an issue with this section, and hope someone can help.

I want to hide overflow content, so I dont have this horisontal scroll bar, but when I click “hide overflow”, it breaks the layout completely. (I’m using a sticky position for three nested sections).
I need to have the section to 1522px wide too.

How do I do this? Hope I’m making sense.

Here is my site Read-Only:

Firstly, very cool site! Really digging the illustration style, colors, and subtle effects you’ve used.

As far as your issue, sticky positioning really doesn’t like non-default overflow settings or set heights, but you should be able to get around this limitation as long as these styles aren’t used on the parent of the elements you want to be position: sticky.

I haven’t tested this, however you may also be able to get around the problem by manually triggering a fixed position on these elements with an interaction instead.

1 Like

Thank you Mike! :blush: :pray:

I’m not really sure how I should go about that. So you’re actually suggesting to rebuild the structures so they don’t share the same parent, in order to avoid the fixed height? Puhh… Not sure how to go about that… :sweat_smile: Also, I tried to set overflow state to “hidden” on the “missions” and “all missions” section and published. But the horisontal scroll was still there, so am not sure if this is really where the issue is? I have gone through every single layer possible and set state to “hidden”…

This is how the structure is now:

Yeah, reworking the structure is definitely not the easiest solution to fix the problem however it’s a silly limitation of position: sticky itself.

One thing I’m noticing is that you’re using 100vw for the width of some of your sections, and that will actually cause a horizontal scrollbar itself as it doesn’t take into account the width of the scrollbar. It’s always best to use 100% for width, and reserve viewport units for height only (ex: 100vh). I can’t say for sure if this is the only reason you’re seeing the overflow, but it’s worth adjusting to test.

1 Like

Ohh that’s interesting. I’ll try the 100% solution first, and check if that solves it.
Last reserve is to rework the sections :laughing:

Thank you for taking a look! Much appreciated.

MIKE IT WORKED!!! :partying_face: :partying_face: :partying_face: :partying_face:
You’re the best! THANK YOU a million. It helped to set all the 100vw to 100%. Now the horisontal scrollbar is gone.

1 Like

Glad to hear that helped solved the issue! Good luck with the project :v: