Canvas with Flex 1 not Transitioning Smoothly

Questions
1

I have this

  <div  style={{ flexDirection: "row", display: "flex"}}>
   <ThreeContent id={"three-content"} style={{ flex: 1, backgroundColor: "red" }} />
   <HTMLContent id={"html-content"} style={{ flex: 1, display: "flex", flexDirection: "column" }} />
  </div>

And this in a onClick somewhere…

  const tl = gsap.timeline();
  tl.to("#three-content", { flex: 1, duration: 1 }, 0); // 0 delay
  tl.to("#html-content", { flex: 0, duration: 1 }, 0); // 0 delay

The HTMLContent scales down as expected but the ThreeContent (a.k.a the Canvas) gets larger only after the html component scales down but doesn’t animate, it jumps to resize. Strangley enough, I set the background of ThreeContent to red and I can see that it is resizing smoothly as expected. Was hoping for a nice resize transition for my 3d Scene also. Here is what’s inside ThreeContent.

  <Canvas  {...props}   shadows>
    <Experience />         
    <Perf/>
  </Canvas>

2

For those wondering I was told on another forum that this is a bit complicated and it’s actually not recommended to resize the canvas unless absolutely necessary. To achieve the effect I want, make the canvas the largest size it will possibly be and put the html component on top of it, so that when the Html resizes the Canvas gives the illusion that it is resizing as well.