What can I do to scroll fixed content within a div in Webflow?

To scroll fixed content within a div in Webflow, you need to wrap that fixed content in a parent container that allows inner scrolling while keeping the overall position fixed.

1. Set Fixed Content Inside a Scrollable Wrapper

• Place your "fixed" content (like a menu or panel) inside a div that you want to allow scrolling.
• Give the outer container (scrollable wrapper) a specific height or max height — this is necessary to enable scrolling.
• Set overflow: auto or overflow: scroll on the scrollable wrapper to enable scrolling when content exceeds available space.

2. Apply Fixed Positioning to the Wrapper (If Needed)

• If you want the entire container (and its scrollable behavior) to stay fixed in the viewport, apply position: fixed to the scrollable wrapper.
• Define position offsets such as top, bottom, left, and right (e.g., Top: 0, Bottom: 0 for full-height).
• Ensure the wrapper has a constrained height (either using fixed values or viewport units like 100vh) so inner scroll logic works.

3. Prevent Full Page Scroll

• When using a fixed element with inner scroll, you may want to disable page scroll behind it when active (e.g., in a modal).
• Add a class to the body element (like no-scroll) and set overflow: hidden in your custom code or Webflow Page Settings → Custom Code.

4. Test on All Viewports

• Scroll behavior may differ slightly between desktop and mobile browsers.
• Use percentage heights or viewport units (e.g., 70vh) instead of pixel heights when targeting mobile layouts.

Summary

To scroll fixed content within a div in Webflow, wrap the fixed element in a container with a set height and overflow: auto or scroll. Optionally set the wrapper itself to fixed positioning if needed, and use inner scrolling to keep the content navigable within the limited space.