Canvas expands when inside a CSS grid

[petargyurov]

My page has a basic CSS grid layout. It's responsive, so each panel changes as the size of the parent changes. See video below:

Screen.Recording.2022-08-19.at.13.32.56.mov

When I replace the C panel with a basic <Canvas> element, the panel starts off with a certain width but immediately expands to some unknown value. In addition, the responsiveness is broken.

Screen.Recording.2022-08-19.at.13.36.03.mov

I cannot for the life of me figure out why this is happening. I have tried modifying the size of the parent div. I have tried setting a manual width to the canvas which also appears to break things further.

How do I make the canvas respect the initial size of its panel? How do I make the canvas responsive?

Is this a bug or something wrong with my CSS?

👉 Code Sandbox

[Yasha-ops]

I have the same probleme... Can someone explain ?

[chuhongkyu]

docs - https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

This is often the case when dealing with canvas. You may have to solve it with JavaScript instead of css.

If it's a cnavas without a background in the model,
Fix the canvas to the center in the grid-column and use it.

This is my old project screen.

I hope it helps you.

[dahuigeniu]

good thankyou

[rockandsalt]

I ended up finding an alternative solution. css grid are by default not allowed to shrink below the content size.. By setting min-height and min-width to 0 on the parent div of the canvas. The canvas will shrink correctly.