empty Canvas keeps expanding infinitely vertically in CSS

[baumi951]

Describe the bug

When i have a simple canvas with Vue Router and a add an empty canvas it keeps expanding forever downwards.

I created a git repo where you can reproduce the bug.

It only happs in portait (smartphone) size of the window.

Quick Workarounds:

• Wrap the Canvas into a div to stop the problem

Reproduction

https://github.com/baumi951/problem1

Steps to reproduce

• Open the git repo (in github codespace)
• npm run dev
• move window to smartphone size
• press the link "ThreeView"
• You can see the size keeps expanding

System Info

Chrome Browser

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[Alvaro Saburido]

The TresCanvas will take the height of its direct parent, so unless you use a window-size prop, set some styles to the parent so it doesn't grow infinite.