How can I create a scrolling div inside a fixed div in Webflow?
TL;DR
- Set the outer div to Fixed position with defined size and optional z-index.
- Nest an inner div with 100% height and Overflow: Scroll, then add content exceeding its height to enable scrolling.
To create a scrolling div inside a fixed div in Webflow, you need to apply the correct positioning and overflow settings.
1. Create the Fixed Div
- Drag a Div Block into the canvas.
- Go to the Style panel, set Position to Fixed (e.g., top right, bottom center) depending on where you want it anchored.
- Set Width and Height values in pixels or percentages to define its visible area.
- Give it a z-index if needed so it stays above other layers.
2. Add a Scrollable Inner Div
- Nest another Div Block inside the fixed container.
- Set the inner div’s Height to 100% (or a specific value smaller than its content).
- Set Overflow to Scroll in the Style panel.
- Optionally style it (padding, borders, etc.) as needed.
3. Add Content to the Scrollable Div
- Place elements like Text Blocks, Images, Rich Text, or repeated items (e.g., CMS List or Collection List) inside the scrolling div.
- Ensure the total height of the content exceeds the height of the inner div to trigger vertical scrolling.
4. Optional: Adjust Scrolling Direction
- To enable horizontal scrolling, set Overflow-X to Scroll and Overflow-Y to Hidden.
- Set Display: Flex (Direction: Row) if you're placing items side by side — useful for carousels or horizontal menus.
Summary
To create a scrolling area inside a fixed div in Webflow, set the outer div to Fixed position, and the inner div to 100% height with Overflow: Scroll. This ensures a scrollable container remains anchored in place on the screen.