How can I create a scrolling div inside a fixed div in Webflow?
TL;DR
- Set the outer div’s position to Fixed with defined dimensions and high z-index.
- Nest an inner div set to Overflow: Scroll or Auto, with appropriate height and content to enable scrolling.
To create a scrolling div inside a fixed div in Webflow, you need to combine two layout settings: one for positioning the parent div as fixed, and another to enable scrolling within the child div.
1. Create the Fixed Parent Div
- Add a new Div Block to your Webflow page.
- Give it a class name, such as
Fixed Container. - In the Style panel, set:
- Position: Fixed (choose screen location like top-left or bottom-right)
- Width/Height: Set values such as 100% width and a fixed height (e.g., 500px), or both fixed dimensions as needed
- Overflow: Leave as default (Visible)
- Z-index: Set a high value like 1000 if you want it above other elements
2. Create the Scrollable Inner Div
- Drag another Div Block inside the
Fixed Container. - Give it a class name, such as
Scrollable Content. - In the Style panel, set:
- Height: 100% or any value that fits inside the parent div
- Overflow: Set to Scroll or Auto (to enable scrolling when content overflows)
- Add your content inside this inner div: text blocks, images, etc.
3. Adjust Content for Scroll Behavior
- Make sure the inner div contains more content than its height to trigger the vertical scroll.
- If needed, add margins and padding to separate content properly.
4. Test Responsiveness
- Use Webflow’s preview mode or publish the site to test the scroll behavior.
- Adjust the height or max-height of the fixed container for responsiveness on different viewports.
Summary
To create a scrolling div inside a fixed div in Webflow: set the outer div’s position to Fixed and set the inner div’s Overflow to Scroll. This enables vertical scroll of content within a non-moving section of the screen.
