Make height of a scrolling div less than certain height (with calc())

Hey there, am facing this issue where my main div doesn't stay on the certain specified height which should be less than some other element, in this example it should be min-h-[calc(100dvh-2.5rem)], where 2.5rem is height of a navbar located at bottom with fixed position, What I want to achieve is that main div should be scrollable without its bottom content getting overlapped with the navbar
The main thing is that it works untill more elements are added where it becomes scrollable
A playground will make you understand better - https://play.tailwindcss.com/FchqlK9POr
Thanks!
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Tailwind Play
Was this page helpful?