Create IncC
Reactiflux•3y ago•
2 replies
Create Inc

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>


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.
Was this page helpful?