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):
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>
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
