How to make the height take remaining space ?
Hi everyone!
I'm working on a droppable area inside a MUI Stack component that follows flexbox rules. The structure includes filter icons and the droppable area, both placed inside the Stack.
I want the droppable area to take up the remaining available height in the container.
Current Setup:
I have not explicitly defined any height for the parent or child elements.
I tried setting flex: 1 on the droppable area, but it didn't work, likely because the parent container doesn't have a defined height.
What is the best approach to ensure the droppable area expands to fill the remaining space within the container? Should I define a height for the parent, or is there another flexbox-based solution?
I'm working on a droppable area inside a MUI Stack component that follows flexbox rules. The structure includes filter icons and the droppable area, both placed inside the Stack.
I want the droppable area to take up the remaining available height in the container.
Current Setup:
I have not explicitly defined any height for the parent or child elements.
I tried setting flex: 1 on the droppable area, but it didn't work, likely because the parent container doesn't have a defined height.
What is the best approach to ensure the droppable area expands to fill the remaining space within the container? Should I define a height for the parent, or is there another flexbox-based solution?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
