Renderer setSize breaks flex layout

Questions
1

I have a scene that I want layered in a vertical flex container, top zone the three scene and a fixed height bar below. I created two divs in a flex container and the canvas inside the first div.

Here you can see what I want in terms of layout: (discard the scene as it is not resized yet)
https://codepen.io/thetruji/pen/QWKvZQz?layout=1

On creation and on window resize, I set the size of the renderer = the size of its wrapping div that supposedly has been re-layered:

https://codepen.io/thetruji/pen/QWKvZQz

After setting the render size on creation of the scene, it appears that apparent padding (?) at the bottom. If you resize the whole window the canvas seems to be growing and breaks the flex layout.

I think that the relevant stuff is in the function resized at the bottom. I’ve omitted the camera setup to make thinks clearer

Am I missing something?

2

Maybe disabling style update in setSize would help?

renderer.setSize(width, height, false);

(It’s not very clear for me what exactly the issue is, the answer is based mostly on what’s in the title :sweat_smile:)

3

I do this already. Can’t you see the problem in the links (now I’m wondering if it’s a local thing although I’ve tested it in two browsers)

4

I am not sure if it’s a solution but at least a cure: Setting overflow: hidden in the style of the canvas-wrapping div seems to fix it.

It’s like at some point something is setting the canvas height too large provoking miscalculations in the reflow. The hidden overflow may free the wrapper from reacting to too-large sizes of the canvas (just guessing).