Responsive component with overflow scroll (Tailwind)

Hello everyone! I wanted an element which takes the entire space available but it should not overflow and increase the page height. I am unable to think of a solution without giving it a specific height which defeats the purpose of it being responsive. Somehow this code worked but I dont know how (Check images, the highlighted part is the "ChatDialogs" component in question) If there is a better way to do it please let me know. Here is the code if you want to check it out : https://github.com/Hiperultimate/groupy/blob/chat-page-FE/src/components/ChatComponent/ChatArea.tsx
import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
const chatData = useRecoilValue(chatOptionState);

const activeChat: TChatOption | undefined = chatData.find((chat) => {
return chat.isSelected === true;
});

if (!activeChat) {
return <></>;
}

return (
<div className="flex h-full flex-col ">
<div className="h-24 border-b border-light-grey">
<ChatHeader
authorName={activeChat.chatName}
authorAtTag={activeChat.chatUserTag}
authorProfilePicture={activeChat.chatImg}
/>
</div>
<div className="flex-grow overflow-y-auto h-2">
<ChatDialogs chatId={activeChat.id} />
</div>
<div className="h-20">
<ChatTextInput />
</div>
</div>
);
};
import { useRecoilValue } from "recoil";
import ChatDialogs from "./ChatDialogs";
import ChatHeader from "./ChatHeader";
import ChatTextInput from "./ChatTextInput";
import { type TChatOption, chatOptionState } from "~/store/atoms/chat";

const ChatArea = () => {
const chatData = useRecoilValue(chatOptionState);

const activeChat: TChatOption | undefined = chatData.find((chat) => {
return chat.isSelected === true;
});

if (!activeChat) {
return <></>;
}

return (
<div className="flex h-full flex-col ">
<div className="h-24 border-b border-light-grey">
<ChatHeader
authorName={activeChat.chatName}
authorAtTag={activeChat.chatUserTag}
authorProfilePicture={activeChat.chatImg}
/>
</div>
<div className="flex-grow overflow-y-auto h-2">
<ChatDialogs chatId={activeChat.id} />
</div>
<div className="h-20">
<ChatTextInput />
</div>
</div>
);
};
Edit: Let me know if there is anything you need from my side or if my query is not detailed enough. I have tried looking it up on the web but failed.
GitHub
groupy/src/components/ChatComponent/ChatArea.tsx at chat-page-FE · ...
A social networking platform made using tRPC, TypeScript, Tailwind, Next, Prisma - Hiperultimate/groupy
No description
No description
4 Replies
Coder_Carl
Coder_Carl10mo ago
Flex grow would grow to take up the available space. Its a solution. I'd set a minimum on it's flex basis and turn off the shrink just to keep a basic height
Hampterultimate
Hampterultimate10mo ago
Yes thats what I thought as well, but having flex-grow without h-2 is not working as it should be. And h-2 by itself is also not making sense as you can see its taking way more than h-2 height flex-grow by itself is giving this issue where adding more items into that div in question is growing the whole div until all items are covered, even after having overflow scroll which is making the whole page longer
clevermissfox
clevermissfox10mo ago
Put a scrollbar on the y-axis so the container stays at 80svh or whatever but the content inside scrolls instead of expands downwards
Hampterultimate
Hampterultimate10mo ago
so you mean I should just add overflow y with scroll and it wont overflow? Okay, I will try it once I get free and will let you know
Want results from more Discord servers?
Add your server