I am unsure of what you mean by "acts weirdly". However, I believe it is more beneficial to design your layout so that the entire screen adapts to accommodate your elements, rather than using fixed variables for the footer as demonstrated in this Tailwind preview:
<div class="flex h-screen flex-col">
<div class="flex-none">
<div class="m-4 flex w-[calc(100vw-2rem)] space-x-2 rounded-lg bg-gray-300 p-4 shadow-md">Header</div>
</div>
<div class="flex-grow overflow-hidden">
<div class="m-4 rounded-t-lg bg-white shadow-lg">
<div class="mx-auto max-w-2xl p-6">
<!-- mainpanel -->
<div class="h-[calc(100vh-15rem)] overflow-y-scroll">
<text class="text-5xl"> Lorem ipsum orem ipsumorem ipsumorem ips... </text>
<textarea>asdf</textarea>
</div>
</div>
</div>
</div>
<footer class="m-4 mt-0 w-[calc(100vw-2rem)] rounded-b-lg border-t-2 border-gray-200 bg-gray-300 shadow-lg">
<div class="flex items-center justify-center space-x-4 p-4">
<button class="btn-solid h-10 w-32 disabled:cursor-not-allowed disabled:bg-gray-100">hello</button>
</div>
</footer>
</div>
As for the scrolling issue, I noticed the font size is too large on mobile screens, causing content to extend beyond the viewport and create an unwanted horizontal scroll. This can be resolved by adjusting the font size from text-5xl to maybe text-3xl md:text-5xl, ensuring the larger font size is only applied when there is sufficient space.
I hope this guidance sets you in the right direction. Have a wonderful day!