React Three Fiber Canvas拉伸父容器且无法响应窗口尺寸变化的问题求助

大家好，我在多个使用react-three-fiber的项目里都碰到了同一个头疼的问题，想过来请教下各位前辈！

先给大家看下我的项目布局结构：

<div className='p-4 flex flex-col h-screen bg-primaryBackground-dark'>
  <div className='flex flex-1 items-center'>
    <div className='bg-secondaryBackground-dark h-full grow-[2] rounded-lg shadow-inner '>
      <Canvas>
        <gridHelper />
        <axesHelper position={[0, 0.01, 0]} />
        <CameraControls />
      </Canvas>
    </div>
    <div className='bg-secondaryBackground-dark h-full grow-1 rounded-lg shadow-inner '></div>
  </div>
</div>

项目里用了Tailwind CSS，熟悉的同学应该一眼能看出来，这里的grow-[2]等价于CSS的flex-grow:2，grow-1就是flex-grow:1，本来是想让左边的容器占2/3宽度，右边占1/3的。

问题来了：如果我把<Canvas>去掉，页面布局完全正常，左右两个div按预期的比例分配空间。但一旦加上<Canvas>，左边的div直接拉伸占满了整个可用空间，右边的div都被挤没了！而且更奇怪的是，这个Canvas还不响应窗口尺寸变化——缩小窗口的时候，Canvas的尺寸不会跟着变小，但放大窗口的时候它却会跟着变大，完全没法自适应。

有没有同学遇到过类似的问题？求指点怎么解决这个布局异常的问题😭

备注：内容来源于stack exchange，提问作者Vipul Rajan