[Collapse] Support flexbox

[ShaMan123]

Summary

I expect Collapse to be able to handle flexbox layout transition.

Examples

https://stackblitz.com/edit/github-nb4cly3i?file=src%2FApp.tsx

In the example there are 3 columns, the left one is collapsed.
Hit the Collapse/FlexCollapse button to toggle which component is used.
Hit the Open/Close button to see the transition in action.
Change the flex input.

Motivation

Using Collapse in a flexbox is not supported/behave unexpectedly

Search keywords: collapse, flex, flexbox

[ZeeshanTamboli]

Using Collapse in a flexbox is not supported/behave unexpectedly

What does not work? If I choose "Flex Collapse" button, and change the flex value to 2 in the TextField, it works.

And why do you need "Flex Collapse" component?

I don't understand what's wrong here..

[ShaMan123]

The point of the demo is to show that the regular Collapse component can't be used in a flexbox.
The Flex Collapse component is a custom component I created that I wish to be supported by mui as part of Collapse

[ZeeshanTamboli]

regular Collapse component can't be used in a flexbox.

Still isn't clear to me. You mean the Collapse component is not layouting like your custom "Flex Collapse" component when changing the flex value in the TextField?

[ShaMan123]

Collapse is not respecting flexbox at all

[ZeeshanTamboli]

Collapse is not respecting flexbox at all

How? What's wrong in your demo?

[ShaMan123]

All 3 columns are a flexbox, the text input controlling the flex value of the first column.
Selecting Flex Collapse gives you the expected behavior.
Selecting Collapse gives you the actual behavior.
Does that make it clear?