How to make Flexbox work with children when using horizontal MUI Collapse Component and TransitionGroup transitions?

Question

I am using MUI and have a hard time using the Collapse + TransitionGroup Component and getting the containers to expand with flex box.

<Box sx={{display: 'flex', height: '100vh', width: '100vw'}}>
  <Box sx={{flex: 1}}>Content-A</Box>
  <Box sx={{flex: 1}}>Content-B</Box>
</Box>

This is a simple example of what I want. Both Boxes next to each other and splitting the whole page in a left side and right side. However when you introduce the Collapse Component it will break:

<TransitionGroup sx={{display: 'flex', height: '100vh', width: '100vw}}>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-A</Box>
  </Collapse>
  <Collapse orientation='horizontal'>
    <Box sx={{flex: 1}}>Content-B</Box>
  </Collapse>
</TransitionGroup>

The Collapse component is now interfering directly with the Flexbox parent-child relationship. If I look into the DOM I notice that the Collapse Component inserts 3 wrappers around the child component (root, outer, inner wrap). How do I pass the flexbox properties down to the original child?
I tried overriding the style of each of those wrapping components in the theme and giving them display: flex, flex: 1 to force it all the way down the chain to the child but that breaks the transition and it looks super choppy.

EDIT: For clarification: I need the transition group because I want a specific transition to happen. Basically I have the page split in left (A) and right (B). On an event I want (A) to transition out the screen (to the left, hence horizontal). (B) should transition to the place where (A) was and a new element (C) comes in from the right and transitions to where (B) was. Imagine it is like a Sliding Queue. Then it is rinse and repeat (B out -> C goes to where B was -> D transitions in to where C was). The problem is that using Collapse horizontal it wont flex the remaining space.

Answer 1

Its a bit unclear what you're actually trying to achieve.

why use transition group?

Usually a <TransistionGroup /> is used to set the in property on a <Collapse/> automatically. For example when adding a bunch of items in a list.

You would not need to have the <TransistionGroup /> if you just want to render 2 columns.
You can pass the in boolean manually.

Styling the collapse.

you can pass styling to the collapse wrapper and set any css you need. IE:

       <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >

Example

have a look at this Code sandbox

It has 2 examples:

• version 1 that just open/close the columns
• version 2 that adds columns and uses transitiongroup to expand them

I think version 1 is what you're really looking for:

const Example1 = () => {
  const [isOn, setIsOn] = React.useState(false);

  const toggle = () => {
    setIsOn((prev) => !prev);
  };

  return (
    <>
      <Button variant="contained" onClick={toggle}>
        {isOn ? "collapse" : "expand"}
      </Button>

      <Box display="flex">
        <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >
          <Box>Content-A</Box>
        </Collapse>
        <Collapse
          in={isOn}
          orientation="horizontal"
          style={{ flex: "1", display: "inline-block" }}
        >
          <Box>Content-B</Box>
        </Collapse>
      </Box>
    </>
  );
};