Welcome to my world!

basics 4: vmax

Here we have a box that measures 30vmax square:

.simple-box {
  height: 30vmax;
  width: 30vmax;
  p {
    font-size: 4vmax;
    padding: 2vmax;

In this example, the box will always measure 30% of either the height or the width of the viewport -- whichever is greater.  So, it's similar to the previous examples, but it chooses based on the viewport ratio whether to behave like vh or vw.