【CSS】まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎

はじめに

漫画『東京卍リベンジャーズ』の名セリフをオマージュしたタイトルですが、この記事はいたって真面目です。

実は Chrome 138 から、CSSで要素のサイズを指定する際に使える新しいキーワード stretch が追加されました。

この記事では、その stretch の概要や使い方について紹介します。

stretch とは？

stretch は、指定した要素がその親要素の使用可能なスペースを完全に埋めるようにサイズを拡大できるキーワードです。

一見 100% と似ていますが、決定的な違いは、box-sizing で指定されたボックスを基準にサイズを決めるのではなく、marginも含めた要素を基準にサイズを決める点です。
これにより、margin も含めて親要素内にピッタリ収めることができます。

See the Pen width-stretch by degudegu2510 | Qiita (@degudegu2510) on CodePen.

↓ このような違いがあります。

Chrome 137 以前	Chrome 138 以降

このサンプルでは、display: inline-blockを指定して、div 内のコンテンツに合うようにしています。
そのため、Chrome 137 以前とChrome 138 以降を比べると、width: stretch を指定している要素が 親の要素に合わせていることがわかると思います。

また、青い要素（width: 100%）と赤い要素（width: stretch）を比べると、
mariginの値だけ、親の要素からはみ出ているか、marginの値も加味して、親の要素からはみ出ないようになっています。

stretch の使い所

① 基本的な使い所 width

いままで、calc() 関数を使って、要素を飛び出ないように 100% - marginサイズ をしていたところを width: stretch に置き換えられるかと思います。

.item {
-    margin: 16px;
-    width: calc(100% - 32px); /* 100% - marginサイズ */ 
+    width: stretch;
}

② 基本的な使い所 height

子要素の高さを親要素に合わせたい時に、親要素の高さを指定していたところを height: stretch に置き換えられるかと思います。

.container {
-    height: 300px;
}
.item {
-    height: 100%;
+    height: stretch;
}

③ flex item や grid item を個別で、グリッドいっぱいにしたい時

align-content: stretch や align-items: stretch、justify-items: stretch では、flex item や grid item全部が1グリッド分いっぱいになっていたけど、個別に1グリッド分いっぱいにした時などにもつかるかと思います。

.container {
     display: grid;
-    align-items: stretch
}
.item {
+    height: stretch;
}

ブラウザの互換性

stretch は現時点（2025年6月）では Chrome 138 以降 でのみ対応しており、他のブラウザではまだ利用できません。

これまでは、以下のようなベンダープレフィックス付きのキーワードを使うことで、親要素にフィットさせる指定がされてきました。

Chrome / Edge / Safari：-webkit-fill-available
Firefox：-moz-available

そのため、現時点では stretch 単体ではなく、これらのキーワードと併用するのが安心です。

.item {
  width: stretch;
  width: -webkit-fill-available; /* Chrome, Safari */
  width: -moz-available;         /* Firefox */
}

ref

まとめ

stretch は、これまで width: 100% や height: 100% を使っていた場面を、より直感的かつ自然に記述できる新しいCSSキーワードです。

• margin を含めて親要素にぴったりフィット
• calc() を使わずにスッキリ書ける
• flex や grid の中でも、個別の要素に自然にフィットさせられる

など、利点も多く便利です。今後のCSSレイアウト設計で重宝するプロパティなることでしょう！

そうなったら、「まだ width: 100% つかってるやついる⁉︎ いねぇよな⁉︎」
とみんなが言っていることでしょう！笑

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。