Difficulty with nested scrolling an markdowns

Scroll Issues with Markdown Parser in Bubble Repeating Group

Plugin Used: Markdown Parser for AI

Platform: Bubble

:red_question_mark: Issue Description

I’m experiencing a scrolling problem with nested scrollable elements in my Bubble app. Here’s the layout:

  • Outer container: Repeating Group with scrolling enabled
  • Inner content: Each cell renders markdown using the Markdown Parser for AI plugin
  • Content type: Varies significantly in length — some are short, others span 20+ pages

:police_car_light: The Problem

When markdown content exceeds the height of the repeating group cell:

  • The markdown gets cut off and users cannot scroll to read the full content
  • If I enable “fit height to content,” the cell expands excessively and overwrites the layout, often pushing the next message out of view
  • If I fix the height (e.g. 800px), long content is fully visible but short messages leave large amounts of white space, degrading the UX

:white_check_mark: What I’ve Tried

  • Applied CSS:
overflow-y: auto;
max-height: 500px;
-webkit-overflow-scrolling: touch;
  • Tried adjusting layout combinations (fixed vs dynamic height)
  • Tested across different browsers

:test_tube: Browser Behavior

  • Safari: Content is rendered but cannot scroll inside the markdown container
  • Chrome: Same — inner markdown content does not scroll
  • Repeating Group: Outer container scrolls fine

:thinking: The Question

Has anyone successfully implemented scrollable, variable-length markdown within repeating group cells in Bubble?

I’m looking for:

  • A way to handle nested scroll areas without disrupting layout
  • A CSS or plugin-based solution to support both short and long markdown
  • A clean UX that doesn’t require hacking together fixed-height padding

:wrench: Setup Summary

  • Tool: Bubble.io
  • Content Renderer: Markdown Parser for AI plugin
  • Display: Repeating Group
  • Challenge: Length varies from 2 lines to 20+ pages
  • Goal: Allow users to scroll inside each cell only when needed, without impacting the RG scroll

Any help or working examples would be greatly appreciated!


Let me know if you’d like me to adapt this for a specific platform (e.g., Bubble Forum, Dev.to, Medium) or embed example code blocks for a working workaround.

Have you tried setting “Fit height to content”, “Allow vertical scrolling” and setting a max height?

Whenever you need to add custom CSS, you’ll need to add the “!Important” tag.

Thansk for the repoly.
I did try what you suggest. The result is that it cuts off the top part of the output. It does not make sense to me but that is what i experienced. Also, I tried various CSS attemots including ons with “!Important”. No joy.