Flex css properties, viewport units - incorrect rendering in preview


I have found that in many cases the preview of elements that have flex css properties is not correct. Sometimes it has to do with units relative to viewport (e.g. vh or vw), other times it has to do with text containers, such as paragraphs.(I have previously documented one such case)

The bug with viewport units is not only related to flex, but seems to be more general.

I will try to add cases and specific examples here when I find time.

I'm not 100% certain, but I think the "flex text container" bug appeared with the introduction of bootstrap version 4.

These bugs are rather important because they make the preview useless when there is extensive use of flex properties. For the time being I'm forced to use the browser as the only "source of truth" when it comes to layout visualisation and the preview window just for drag and drop.

The flex bugs on textual elements were fixed in 4.1.0. Right now viewport units (vh and vw) are converted to a fixed size in pixels when displayed, so they can be rendered in the application. The stage (area where the page is rendered inside the app) expands automatically, and vh won't work as intended if it isn't converted to pixels.

Maybe an idea would be to have a setting for the user to set the desired viewport height for any of the boostrap breakpoints or/and on a global level. So the stage can expand, but the basis for calculating vh units would remain constant.

And to expand on this idea, there could be a toggle - something like "clip preview to viewport height" - that would confine the stage preview to the viewport height set by the user.