Streaming live at 10am (PST)

Absolutes - overflow-x:hidden creates vertical scroll

Hi Webflowers,

This is about positioning absolute elements, preserving vertical scroll but avoiding horisontal.

CONTEXT
As seen here, I have a section with an absolute element in the background. The absolute consists of a wrapper and an HTML embed. With overflow: hidden, the element gets clipped in the section, as shown with the red lines in this image.

PROBLEM
Overflow-x: hidden and overflow-y: visible creates a vertical scrollbar inside the element. This is silly. Reading up on the problem many seem to have encountered the same, but I haven’t come across a good solution.

I’VE TRIED

  • Adding overflow-x: hidden to body instead. This kills stuff like sticky elements and prevents scroll in Safari.
  • Adding overflow-x to sections. Creates vertical scrollbars too

WANTED SOLUTION

  • Overflow-x: hidden
  • Overflow-y: visible
  • No scrollbar in that element
  • Absolute element doesn’t clip inside the section but can freely be moved up and down behind the previous and next section

PREVIEW LINK
Link