jquery.app
日本語
EnglishDeutschFrancaisEspanol日本語Nederlands

CSSツール

無料 CSS stretchサイジングジェネレーター

ブロック、フレックス、グリッド、絶対配置レイアウトでのfill-availableサイジングのためのstretchキーワードCSSを生成します。

ツールを読み込み中...

CSS stretchサイジングジェネレーターとは

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.

クイックアンサー

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

制限事項

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

使い方

  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.

主な用途

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

用途

使用例

例

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.

例

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.

よくあるミス

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

検証

  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

CSS stretchサイジングジェネレーターのFAQ

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.

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください