v138 · css
Grid Cell Gutter Fix
The classic overflow bug: width: 100% on an input inside a grid cell means 100% of the content-box, so the element's own side padding pushes it outside the cell. width: stretch fills the available space — content-box, padding, and margin all accounted for. Adjust the sliders to see the difference at different padding values.
width: 100%
⚠ overflow
width: stretch
✓ fits correctly
width: 100% — what the browser computes
effective width = 100% of parent content-box
= cell_content_width
+ margin_left + margin_right
= cell_content_width + margins
→ overflows the cell ⚠
width: stretch — what the browser computes
effective width = available space − margins
= cell_content_width − margin_left − margin_right
= fits inside the cell
→ no overflow ✓
/* The broken pattern */
.card input {
width: 100%; /* ← overflows when cell has padding or input has margin */
}
/* The fix — Chrome 138 standardised keyword */
.card input {
width: stretch;
/* vendor prefix still needed for Safari */
width: -webkit-fill-available;
}
History:
-webkit-fill-available and -moz-available
have existed for years but were vendor-specific. Chrome 138 ships the standardised
stretch keyword, which means you can write one clean rule without a prefix and
know it will work cross-browser once all engines adopt the spec. The semantics are identical:
fill the available space after subtracting the element's own margin from the containing block's
content width.