I am new to React (v18.1) and MUI (v5.8.4) and I am trying to create a Search modal. I have a simple layout that I made with flexboxes using the Box element from MUI. It is composed of a Searchbar on top, a collapsible filters section, a main content box to display the search results and a footer. There is an issue with the Collapse section: when the main section content starts to overflow the collapsible section size starts to reduce. The more it overflows, the smaller the collapse section will be.

With few items (expected behavior) vs With many items (unexpected behavior)
Sorry for the ugly links I have not enough reputation to embed the images

I have made a simple CodeSandbox Example where you can play with the itemCount and trigger the collapse with the toggle button to reproduce the issue

What I have tried:

• I have tried many CSS rules to overcome this issue and none worked also I am no CSS pro
• I have tried to replace the content on the main section which is a List by various stuff such as span div or raw text and nothing worked

Any help or tips to improve the overall layout and fix the issue are welcome