Filling available space without calc workarounds
Making an element fill its container while keeping margins meant calc(100% - left - right) or risking overflow with width: 100%. The stretch keyword fills available space while respecting margins automatically.
2 width: 100%;
3 /* overflows if margins are set */
4
5 /* OR: hard-code margin values */
6 width: calc(100% - 40px);
7}
2 width: stretch;
3}
Margin-aware
stretch applies to the margin box. Margins are respected without manual subtraction.
No overflow
Unlike width: 100%, stretch can never overflow the container when margins or padding are present.
Works on height too
Use height: stretch to fill the block axis. Great for full-height layouts without 100vh quirks.
How it works
When you set width: 100% on an element with margins, the element overflows its container because 100% refers to the content box of the parent, and margins are added on top. The workaround was width: calc(100% - 40px) where you hard-code the exact margin values. Change the margins and you must update the calc too.
The stretch keyword resolves to the available space in the containing block, applying the result to the element's margin box instead of the box determined by box-sizing. This means the element fills its container exactly, with margins intact, without any manual math. It works on width, height, min-width, max-height, and all sizing properties.