CSS Tip

A Better Way to Express Percentage Height

Percentage height is a common issue in CSS. Using height: 100% to fill the vertical space fails in most cases because the parent container doesn't have an explicit height. Even if the parent has a definite height, you may still face issues related to margin, box-sizing, etc.

Instead of height: 100%, you can rely on the new stretch value that will do a better job!

.box {
  height: stretch;
}

How does it work? #

As its name suggests, it will try to stretch the element to fill the parent container (more precisely the containing block).

It works following two rules:

  1. If the element can be aligned using align-self (and align-items), the value produces the same result as a stretch alignment (align-self: stretch).
  2. If alignment doesn't apply, it works the same way as height: 100%, expect that margin is considered and the value of box-sizing doesn't matter. In other words, you won't get overflow issues due to margin, padding, or border.

In the demo below, height: 100% will either fail or create an overflow, while height: stretch is perfect!

⚠️ Limited Support (Chrome-only for now)

See the Pen Height: 100% vs height: stretch by Temani Afif (@t_afif) on CodePen.

Additionally, using height: stretch gives the element a definite height, allowing for a cascading stretch.

* {
  height: stretch;
}

See the Pen cascading stretch by Temani Afif (@t_afif) on CodePen.

stretch may not work if self-alignment doesn't apply to the element AND the parent container (containing block) doesn't have an explicit height. Similar to height: 100%, it will fallback to auto. Those cases are rare, but don't forget about them.

Here is an example involving inline-block elements.

See the Pen No stretching by Temani Afif (@t_afif) on CodePen.

What about a percentage different from 100%? #

stretch only covers the 100% case, so if you want to, for example, consider height: 80%, you need to rely on the calc-size() function.

.box {
  height: calc-size(stretch, .8*size);
  /* same as height: calc(.8*stretch) */
}

The size keyword in the calculation will refer to the stretch value to find the result, which is the same as "80% of stretch".

See the Pen calc-size() with stretch by Temani Afif (@t_afif) on CodePen.

Note that the same applies to width: stretch, expect that we consider the justify-* properties instead of the align-* ones in the first rule.

More CSS Tips