stretch
The stretch CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.
Overview
The stretch CSS keyword expands a box as needed to fit its contents until the maximum size is reached, without preserving the content's preferred aspect ratio.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.height.stretch | 138 | 138 | 146 | 9 | 138 | 9 |
| CSS property | ||||||
stretch | 138 | 138 | | 9 | 138 | 9 |
stretch | 138 | 138 | | 7 | 138 | 7 |
stretch | 138 | 138 | | 9 | 138 | 9 |
stretch | 138 | 138 | | 7 | 138 | 7 |
stretch | 138 | 138 | 146 | 7 | 138 | 7 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (22)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (25)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (28)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (22)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (25)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (22)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (79)
Notes 1 item(s)
Implementation note
- Previously available under a different name: -webkit-fill-available (25)
Syntax
CSS
.fill-container {
width: stretch;
height: stretch;
}Live demo
Use cases
Component layout
Use stretch to create more predictable spacing and placement inside reusable UI patterns.
Responsive structure
Adapt containers and flow rules so layouts stay stable across viewport changes.
Cautions
- Test layout rules with real content, long labels, and small screens before depending on them broadly.
- Prefer simpler layout primitives if they already solve the problem clearly.
Accessibility
- Layout choices should preserve reading order and support zoom without clipping.
- Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.
Related links
Powered by web-features