Sticky Element Not Working in Two-Column Flex Layout

Design help General
1

Hi Webflow Support,

I’m trying to build a two-column layout where:

  • The left column contains long text content (an Introduction section).

  • The right column contains a smaller “Table of Contents” box that I want to stay sticky as the user scrolls down.

Here’s how I have set it up:

  • The parent container is a flex div with two child divs, each set to 50% width.

  • The left column has long text and scrolls normally.

  • The right column is a wrapper with position set to relative. Inside it, I placed the “Table of Contents” div and set that inner div to position: sticky with top: 20px.

  • I’ve checked that the parent container has overflow: visible.

However, the “Table of Contents” does not stick when scrolling — it just scrolls normally along with the rest of the content. I’ve also tried publishing the site and testing outside of Designer Preview, but the sticky behavior still does not work.

Could you please advise why sticky positioning isn’t being applied in this case? Is there something about flex layouts or Webflow’s structure that might be preventing it from working?

Thank you!

1 Like
2

Hi there,

When position sticky isn’t working as expected, there are several common causes to check:

  1. If any parent element has a set height, position sticky won’t function properly
  2. Overflow settings of hidden, scroll, or auto on any parent elements can prevent sticky positioning
  3. For vertical scrolling, make sure you have defined a proper distance value (like top: 20px) that aligns with the scroll direction

Position sticky may also be affected by alignment settings if the sidebar is a flex child. Check that your sidebar’s alignment settings aren’t conflicting with the intended sticky behavior.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like