Romoy
KPCKevin Powell - Community
•Created by Romoy on 12/11/2024 in #front-end
Overflow and Height Issues
So I am trying to make a chat UI for a website
And issue I ran into is overflow, I made the chat section a specific height and made it scrollable so the chat doesn't take up the entire page and I added Inputs below it
The input does not take up the remainder of the parents height despite me making the height "h-full" (I am using Tailwind CSS). And after experimenting, I found it's because of the chat container. I calculated the height like this "max-h-calc[calc(100vh-26rem)]"
And when the user uploads an attachment, and the attachment is displayed it creates overflow.
My goal is for the chat section to resize automatically and for there to be no overflow on this page
This is the replit
https://replit.com/@demetrikameka18/Environment-Code?v=1
You can run it and see the issue I am taking about, when ran redirect yourself to "/tickets/1"
7 replies