How can I create a scrolling div inside a fixed div in Webflow?
TL;DR
- Drag a Div Block, set its Position to Fixed, configure Width and Height as needed.
- Inside it, drag another Div Block, set its Overflow to Scroll, and assign a Height.
- Add content inside the scrolling div; it will scroll automatically when content overflows.
- Check responsiveness across breakpoints and adjust dimensions as needed.
If you want to create a scrolling div inside a fixed div in Webflow, the goal is to fix the outer container while making the inner container scrollable.
1. Create the Fixed Div
- Drag a new Div Block into your page.
- Set its Position to Fixed (under Layout → Position → Fixed).
- Choose where you want it fixed (Top, Bottom, etc.).
- Set Width and Height (e.g., 100% width, 500px height) so it doesn't cover the entire screen unless you intend it to.
2. Add the Inner Scrolling Div
- Drag another Div Block inside the fixed div.
- Set its Overflow property to Scroll (under Style → Overflow → Scroll).
- Set a Height (like 100% or specific pixels) so it knows how much space to use within the outer fixed div.
3. Adjust Content
- Add as much content (text, images, CMS collections) inside the scrolling div.
- When content exceeds the div’s height, scrollbars will appear automatically.
4. Double-Check Mobile Responsiveness
- Check different breakpoints to ensure the fixed container and the scrolling area behave correctly on smaller screens.
- You might need to tweak the heights (like using Min Height 50vh) depending on layout preferences.
Summary
Create a fixed-position outer div and place an overflow-scroll inner div inside it. By setting the correct height and overflow settings, the inner div will be scrollable while the outer one remains fixed on the screen.