Scrollable content within a grid?

Community resources General
#1

I have a grid that takes 100vh and 100vw. I would like to make content within the grid individually scrollable. Specifically, the two tabbed areas and the section on the right (when content has overflowed), is this possible? I can’t find many resources on scrollable grid content.

Thanks!

https://preview.webflow.com/preview/rexlabs-projects?utm_medium=preview_link&utm_source=dashboard&utm_content=rexlabs-projects&preview=5064a909c004d6ac6320c844a6d4f56b&mode=preview

#2

Good afternoon @melissa and welcome to the community of Webflowians!

Ive created a video to explain the answers to your questions. Hope this helps you?

Happy Designing,

Brandon

1 Like
#3

Thank you so much for the quick and thorough response @QA_Brandon. It helped a lot. So I just needed to set a height on the areas I wanted scrollable. I had naively presumed that if the parent div was clipping the child’s content, that it would be enough.

So I’ve now set heights on the three areas I wanted clipped, for example 80vh, however, my goal was that they would extend to the bottom of the viewport, and once overflowed then be scrollable. So, ideally, I need to set the height to 100 viewport height minus the px height of content above. Do you know any way I can achieve this?

#4

And the padding on the left and top are simply placeholders for where the navigation sit for the CRM I design for :slight_smile:

#5

@melissa, the easiest way would be to play with the view heights.

Unfortunately with using vh as a defined number, you are unable to get it to calculate. You can mix 5 & px but not vh/vw with the others.

I would adjust based on your varied heights you are trying to achieve. Although I would leave some bottom padding/margin!

#6

Thanks, @QA_Brandon – I’ll have a play with some viewport heights. Thanks again for the help!

1 Like