Dynamic height

[lilouartz]

Satori asks to provide width and height of the image. What if the image height is dynamic?

The image is a of table of ingredients.

I want to render this as a table https://pillser.com/supplements/michael-s-naturopathic-kidney-factors-403

[jpope19]

has anyone figured this out yet?

[edenstrom]

Hey! I've solved this in our project. What it basically boils down to is to render twice.

1. Render it normally
2. Read the height from the first mask>rect.
   See image below that the height is 752 in a 400 container.
3. Render it again but with the new height.

Important

If it doesn't work for you. Make sure that it overflows with flex and do not use height: 100% for the root element.

Playground

After updating the height to 752, it fits perfectly.