Using inside a fluid container

[ErickPetru]

Using inside a fluid container

[h-ikeda]

This seems to be the problem.
https://stackoverflow.com/questions/6735022/remove-the-extra-whitespace-surrounding-iframes

It says the chrome makes an extra spaces above iframes because they are an inline element. Since VueGL detects the root element size via inner iframe, it calculates wrong canvas size and falls in infinity loop...

So adding line-height: 0; to the VueGL container can be a temporary solution.

main > div > *:first-child {
  line-height: 0;
  height: 100%;
}

VueGL should treat this in the future.

[h-ikeda]

Unfortunately I haven't created fluid layout examples.

The "enough size constraints" means, properties those determine container width and height uniquely from the viewport size.
So you can use relative values like width: 50%;, flex boxes, ... but be careful when the calculated size depends on the inner contents.

Typically you should apply size related properties like width, height, flex-basis, flex-grow, ... they don't have to be fixed pixel sizes.

[ErickPetru]

Thanks for your reply @h-ikeda, I was able to put it inside a fluid container with percentages. But I still wasn't able to use flex boxes in a hierarchical layout. Here's a fiddle showing the problem if you don't mind to give a look at.

[h-ikeda]

New released version 1.x now renders a canvas as the component root element, not in the wrapper element.

To handle renderer's style or layout, notice that the rendered element is just a .