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?