How to add scroll in the framer-motion expandable card example?

Question

1. click one of the card
2. the card expands and pops up
3. tried to scroll but only scrolling the background page while I wanted to scroll down to view more text

I already tried overflow:hidden which doesn't scroll ( and the scroll bar is ugly)

How can I solve this ? thank you very much !

https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct?from-embed

Answer 1

It looks like a few things are preventing the scroll:

1. height: auto sizes the container to fit the content.
2. overflow: hidden instead of scroll.
3. pointer-events: none prevents the element from getting the scroll events.

Changing this block in styles.css:

.open .card-content {
  height: auto;
  max-width: 700px;
  overflow: hidden;
  pointer-events: none;
} 

to this:

.open .card-content {
  max-width: 700px;
  overflow-y: scroll;
}

seems to work.