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 ensure the content is scrollable inside a container with limited height, even if the element is positioned fixed.

​

1. Set the Fixed Element

​

• Select the element you want to scroll inside (e.g., a sidebar or modal).
• Set its Position to Fixed in the Style panel.
• Choose which side(s) it's fixed to (e.g., top-left, full-screen, etc.).

​

2. Add a Scrollable Inner Div

​

• Add a div inside the fixed element to act as a scroll container.
• Give it a class like scroll-container.
• Set a fixed height (e.g., 100% or a specific px/rem value).
• Set Overflow to Scroll or Auto in the Style panel to allow scrolling when content exceeds the height.

​

3. Insert Content into the Scrollable Div

​

• Place your overflowing content (text, images, lists, etc.) inside this scroll-container div.
• Ensure the content height exceeds the container’s height to activate scrolling.

​

4. Optional: Adjust Mobile Behavior

​

• For mobile devices, make sure the fixed element doesn’t block other content or prevent smooth scrolling.
• Use Webflow Breakpoints to adjust layout and sizing for smaller viewports.

​

5. Test Scroll Behavior

​

• Preview your site in Webflow to ensure the scroll works correctly inside the fixed element.
• If it doesn't work, check:
• A parent may have overflow: hidden, which can prevent proper scrolling.
• The fixed element covers too much of the page or is incorrectly positioned.

​

Summary

​

To scroll content within a fixed div, place an inner scrollable container div inside the fixed element, set a height, and apply Overflow: Auto or Scroll. This creates a controlled scroll area while keeping the main element fixed in place.