A Better Way to Express Percentage Height

February 10, 2026

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:

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).
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)

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

* { height: stretch;}

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.

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); }

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

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

Elastic/Bouncy Text Effect A few lines of modern CSS to create a fancy elastic effect on hover. February 03, 2026
Responsive Pyramidal Grid of Hexagon Shapes (and more!) A responsive pyramidal grid of various shapes without media queries. January 27, 2026