What are the optimal settings in Webflow to enable scrolling within a div block?

To enable scrolling within a div block in Webflow, you need to adjust its size and overflow settings correctly.

1. Set a Fixed Height or Max Height

• Select the div block you want to make scrollable.
• Under the Style panel, set a fixed height (e.g., 300px) or a max height if it should expand only up to a certain limit.
• This limits the vertical space the div can occupy, allowing overflow content to be scrollable.

2. Adjust Overflow Setting

• With the div block still selected, go to the Overflow setting under the Layout section in the Style panel.
• Choose Scroll or Auto:
• Scroll – always shows scrollbars when content overflows.
• Auto – shows scrollbars only when necessary.
• Set Overflow: Scroll (or Auto) for the vertical (Y) axis, or both X and Y if horizontal scrolling is needed.

3. Ensure Content Overflows

• Make sure the inner content (text, elements, etc.) extends beyond the div's height to trigger scrolling.
• If the div has padding or inner margins, they count toward the total height and can affect scrollability.

4. Remove Conflict Styles

• Do not apply conflicting display properties, e.g., Display: Flex with overflow hidden, which may suppress scrolling unintentionally.
• Ensure Parent containers don’t have restrictions (like overflow: hidden) that clip the scrollable div.

5. Optional: Add Smooth Scrolling or Custom Scrollbars

• Webflow does not support smooth scrolling or custom scrollbars out of the box, but you can use custom CSS embed or third-party libraries if needed.

Summary

To allow scrolling within a div block in Webflow, set a fixed or max height, apply overflow: auto or scroll, and ensure the content exceeds the div’s height. Adjust overflow settings carefully to avoid conflicts.