jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Stretch Sizing Generator

Genereer CSS met het stretch-sleutelwoord voor fill-available-sizing in block-, flex-, grid- en absoluut gepositioneerde layouts.

Tool laden...

Wat is CSS Stretch Sizing Generator?

The CSS stretch keyword (Chrome 138+) is the standard value for fill-available sizing, replacing the vendor-prefixed -webkit-fill-available and -moz-available keywords. When you set width: stretch, the element sizes to fill the available space using margin-box sizing — meaning the element's margin-box fits inside the containing block. This differs from width: 100% which uses content-box sizing and often overflows when padding, border, or margin are present. stretch works in block, flex, grid, and absolutely positioned layout contexts.

Snel antwoord

Use width: stretch or height: stretch for standard fill-available sizing. Unlike width: 100%, stretch uses margin-box sizing so padding and border do not cause overflow. Replaces -webkit-fill-available and -moz-available with a single standardized keyword. Chrome 138+, Firefox 130+, Safari 18.2+.

Beperkingen

  • stretch is not yet supported in all browsers. Chrome 138+, Firefox 130+, and Safari 18.2+ support it. Keep vendor-prefixed fallbacks (-webkit-fill-available, -moz-available) and a width: 100% fallback for older browsers.
  • stretch only works on elements with block, flex, grid, or absolutely positioned display. Inline elements, table cells, and replaced elements (img, video, iframe without explicit sizing) do not support stretch sizing.
  • In flex and grid contexts, stretch may interact unexpectedly with alignment properties. A flex item with align-self: stretch and width: stretch can produce conflicting sizing instructions — the stretch keyword on the sizing property takes precedence over alignment stretch.

Zo gebruik je deze tool

  1. Select your layout context — the behavior of stretch differs slightly between block, flex, grid, and absolutely positioned elements.
  2. Choose the axis you want to stretch (width, height, or both via inset: 0 for abspos).
  3. Review the layout-specific note explaining how stretch interacts with margins, padding, and the containing block in your chosen context.
  4. Copy the generated CSS and replace any existing width: 100% patterns or vendor-prefixed fill-available declarations.

Waarvoor je het kunt gebruiken

  • Replace width: 100% on an input or select element that overflows its parent due to padding and border — stretch uses margin-box sizing so the total box fits inside the container.
  • Standardize cross-browser fill-available sizing by replacing -webkit-fill-available and -moz-available with the standard stretch keyword.
  • Make an absolutely positioned element stretch to the edges of its positioned ancestor without explicit top/right/bottom/left values.

Gebruik

Praktische voorbeelden

Voorbeeld

Full-width input without overflow

A search form has an input with padding: 8px 12px and border: 2px. Using width: 100% causes the input to overflow its container by 28px on each side. Changing to width: stretch makes the margin-box fit inside the container, keeping the input flush with the form boundaries.

Voorbeeld

Migrate from vendor-prefixed fill-available

A legacy stylesheet uses width: -webkit-fill-available with a -moz-available fallback. Replace both with width: stretch — the standard keyword works the same way and is supported in Chrome 138+, Firefox 130+, and Safari 18.2+. The fallback declarations can remain for older browser versions.

Veelgemaakte fouten

  • Expecting stretch to behave identically to width: 100% in block layout — 100% uses content-box sizing and ignores padding/border on the element itself, while stretch uses margin-box sizing. In most cases, stretch is the desired behavior for inputs and form elements.
  • Using stretch on a flex item when the flex container has align-items: stretch — the stretch keyword on the item overrides the container's stretch alignment, which may produce unexpected sizing.
  • Assuming stretch works in inline layout contexts — stretch only applies to elements with a block, flex, grid, or absolutely positioned display type. Inline elements ignore stretch and fall back to intrinsic width.

Verificatie

  1. Inspect the element in DevTools and verify the computed width or height matches the expected fill-available size — the element should not overflow its container even with padding and border applied.
  2. Resize the viewport or container and confirm the element stretches to fill the available space at all sizes. Compare side by side with a width: 100% reference to see the difference at narrow viewports.

FAQ

Vragen over CSS Stretch Sizing Generator

How does stretch differ from width: 100% in terms of padding and border?

width: 100% is relative to the containing block's content-box width, then padding and border are added on top — the element overflows its container. stretch sizes the margin-box to fill the available space, so padding and border are subtracted from the total, keeping the element inside its container. This makes stretch behave the way most developers expect width: 100% to work, especially for form elements.

Does stretch work in writing modes other than horizontal-tb?

Yes. stretch respects the writing mode of the element. In vertical writing modes (vertical-rl, vertical-lr), width: stretch stretches along the inline axis (vertical) and height: stretch stretches along the block axis (horizontal), matching the writing direction. This makes stretch more writing-mode aware than fixed pixel or percentage sizing.

What is the difference between stretch and the newer fill-available keyword?

fill-available and stretch are the same value with different names. The CSS specification originally proposed fill-available, then renamed it to stretch before implementation. stretch is the canonical name. Both resolve to the same intrinsic size calculation in supporting browsers, but only stretch is guaranteed forward-compatible.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool