Issues with overflow and in a flex grow container
Basically the above title. I am working on a codepen for a general idea of the question but I think it would be more confusing than describing the issue.
What I am building is as follows: -> I am also using tailwind
- Dashboard with 2 parts in a flex-col one above the other
--- 1. Thin Ui Stuff
--- 2. Big box that i want to stretch into the rest of the screen, while still allowing overflow-scroll in the children without the entire page scrolling (Problem is Here)
I have the component done in theory, but I want it to be rigid so that I can use overflow on a child element. The problem is that the <PastShifts /> component can be arbitrarily tall, and is causing the box to expand way past the set height, even if i give it something specific like 700px.
Im open to any and all changes, but how could i reasonably make it so the final div only takes up the remaining height while still being rigid to allow for future overflow rules?
My broken code for reference (React and Tailwind):
<div className="flex h-full flex-col space-y-4 p-8 pb-4 pt-6">
{/* Other elements, relatively thin */}
<div className="flex items-center justify-between space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
</div>
<div className="mb-5 flex flex-col gap-2">
<h3 className="text-xl font-normal">Upocming Shifts</h3>
<UpcomingShifts events={data} />
</div>
{/* End of other elements start of div i want to take up rest of screen*/}
<div className="flex flex-grow overflow-y-auto bg-red-300 p-2">
<div className="grow bg-blue-300">1</div>
{/* <PastShifts events={data} /> */}
</div>
</div>3 Replies
a codepen does help (or https://play.tailwindcss.com/)
I think it would be easier with grid full height, the fist row max-content and the second row 1fr
Oh thats a good approach, and thinking of the def of an fr probably exactly what i need too! Ill test it!
That is working like a charm so far thanks so much! I should probably get used to using more grids in my layouts, these are fun! Tysm!
no problem, you're welcome! Good luck on the project!