Limited support Useful when stretch helps structure space, flow, or sizing without relying on brittle manual adjustments.

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.

Layout

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

width: stretch

CSS Width: stretch demo.

PreviewFullscreen

height: stretch

CSS Height: stretch demo.

PreviewFullscreen

bothstretch

CSS bothstretch demo.

PreviewFullscreen

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