Consider the following markup:
<section style="width:min-content"> <div style="width:10vh"> </section>
Note that the div has width equal to 10% of window’s height.
That looks quite simple but introduces quite unpleasant problem.
HTML/CSS layout task consists of two major steps:
- Layout width -> will give us min/max widths and content height, quite expensive as almost always it is O(N) complex.
- Do layout height as a final step. That’s essentially quite cheap vertical alignment operation and only where it is needed.
When you change height of the window (but not width) you can skip step 1 completely. Even while changing width many elements will keep their min/max widths intact. That allows to save CPU cycles quite a lot.
width:10vh is a game changer here – it ruins such optimizations completely. Even when changing only height of the view you shall do full relayout 🙁 The same applies to vmin/vmax units.
Use vh/vmin/vmax units responsibly.