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.
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?
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?
And the padding on the left and top are simply placeholders for where the navigation sit for the CRM I design for
@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!
Thanks, @QA_Brandon – I’ll have a play with some viewport heights. Thanks again for the help!