Xero•12mo ago

React Three Fiber Canvas Does Not Shrink

I have had this problem across multiple projects with react-three-fiber below is the structure of my project

 <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 basis-2/3 shrink-[2] rounded-lg shadow-inner '>
          <Canvas>
            <gridHelper />
            <axesHelper position={[0, 0.01, 0]} />
            <CameraControls />
          </Canvas>
        </div>

        <div className='bg-secondaryBackground-dark h-full basis-1/3 shrink-1 rounded-lg shadow-inner '></div>
      </div>
    </div>

 <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 basis-2/3 shrink-[2] rounded-lg shadow-inner '>
          <Canvas>
            <gridHelper />
            <axesHelper position={[0, 0.01, 0]} />
            <CameraControls />
          </Canvas>
        </div>

        <div className='bg-secondaryBackground-dark h-full basis-1/3 shrink-1 rounded-lg shadow-inner '></div>
      </div>
    </div>

I am using tailwindcss in the project, you can probably already see that. If you aren't familiar shrink-[2] is equivalent to flex-shrink:2 and shrink-1 is equivalent to flex-shrink:1. Here's the problem, if I don't put Canvas in the project, the page looks like it should. A div on the left takes 2/3rd of the screen and a div on the right takes the remaining 1/3rd. But when I put Canvas in the project as shown above the left div stretches to take all of the available space. It also becomes unresponsive: if I try to reduce the size of the window the size of the canvas does not decrease but if I try to increase the window size the size of the Canvas increases.

1 Reply

Xero•12mo ago

I figured out what the problem was. By default, flex sets it's min width to be equal to the size of its content. Once the Canvas is created the min width of the flex changes to the size of the Canvas just setting minWidth to 0 on the div that contains the Canvas solves this issue