While using the Material UI accordion, I have encountered an issue within the AccordionSummary component where the title should be displayed. I have created a flex layout with two flex items inside.
The first flex item contains the accordion title, while the second flex item houses some buttons. The second flex item has a fixed width, and I would like the first flex item to occupy the remaining space.
As a result, the width of the first flex item is dynamic and depends on the screen size, which in turn affects the width of the accordion.
My goal is to have the title displayed with text ellipsis if the length of the title exceeds the available space within the flex item. However, in practice, the title text overflows outside of the Accordion component, causing the content of the second flex item to also overflow.
Due to the complexity of sharing my project code here, I have replicated the issue on codesandbox.