Canvas does not resize when changing margin-right of parent container

[lezan]

I am trying to create an animation with @react-spring, a mesh defined into a canvas with r3f and some dom elements.
Actually I am unable to correctly change canvas size when I change margin-right of parent container. It does not reflow the layout, because if I scroll or change window dimension it works. If I remove the canvas element all work as expected.

To give you an idea I prepared this codesandbox: https://codesandbox.io/s/nostalgic-bohr-lqxo7

Can I fix it some ways?

I open to all kind of suggestions: switch from margin-right to something else (width, transform and so on) or with something different pattern.
I already tried with "width", but the model moves to the new size of canvas ungraceful.

Thanks!

[lezan]

I did some changes and I was able to use margin-right just adding hidden: overflow to canvas parent container.
However I prefer to switch to right transition because animation seems to be more fluid.

Now the codesandbox works as expected for canvas resizing.

But can I ask if possible to transition scale transform property of canvas parent container? Because If I do not scroll no Model show up and canvas dimensions is not updated to the current parent size.