score:1

Accepted answer

i think that css flex and <collapse /> are not mean to be used in this manner. <collapse /> itself will set css like width:0px that your display:flex will simply ignore.

using csstransition

as an alternative you can create and set the transition rules yourself using the <csstransition /> component. this is also used by the <collapse/> internally.

the docs should be helpfull.

example

there is a sandbox example

const usestyles = makestyles({
  "slide-enter": {
    flexgrow: 0,
    width: 0,
    overflow: "hidden",
    whitespace: "nowrap",
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  "slide-active-enter": {
    flexgrow: 1,
    width: "auto",
    overflow: "hidden",
    whitespace: "nowrap",
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  "slide-done-enter": {
    flexgrow: 1,
    width: "auto",
    overflow: "hidden",
    whitespace: "nowrap"
  },
  "slide-exit": {
    flexgrow: 1,
    width: "auto",
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  "slide-active-exit": {
    flexgrow: 0,
    width: 0,
    overflow: "hidden",
    whitespace: "nowrap",
    paddingleft: 0,
    paddingright: 0,
    transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
  },
  "slide-done-exit": {
    flexgrow: 0,
    width: 0,
    overflow: "hidden",
    whitespace: "nowrap",
    paddingleft: 0,
    paddingright: 0
  }
});

.......
     <transitiongroup style={{ display: "flex" }}>
        {columns.map((_, i) =>
          i >= columns.length - 2 ? (
            <csstransition
              key={i}
              timeout={300}
              classnames={{
                appear: classes["slide-enter"],
                appearactive: classes["slide-active-enter"],
                appeardone: classes["slide-done-enter"],
                enter: classes["slide-enter"],
                enteractive: classes["slide-active-enter"],
                enterdone: classes["slide-done-enter"],
                exit: classes["slide-exit"],
                exitactive: classes["slide-active-exit"],
                exitdone: classes["slide-done-exit"]
              }}
            >
              <coloredbox>content-{i}</coloredbox>
            </csstransition>
          ) : null
        )}
      </transitiongroup>

old answer

old answer before clarification from op:
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>
    </>
  );
};

Related Query

More Query from same tag