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
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
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