jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS Stretch-Sizing-Generator

Generieren Sie CSS mit dem stretch-Schlüsselwort für fill-available-Größen in Block-, Flex-, Grid- und absolut positionierten Layouts.

Tool wird geladen...

Was ist 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.

Kurze Antwort

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+.

Einschränkungen

  • 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.

So nutzt du dieses 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.

Wofür du es nutzen kannst

  • 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.

Anwendungsfalle

Praxisbeispiele

Beispiel

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.

Beispiel

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.

Haufige Fehler

  • 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.

Überprüfung

  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

Fragen zu 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.

Verwandte Tools

Weitere 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.

Tool öffnen

Auch ausprobieren

Auch ausprobieren