【CSS】webkit-fill-availableとは？

-webkit-fill-availableは、Webkitブラウザに固有の、要素のコンテンツが収まるだけの幅を指定するCSSプロパティです。

このプロパティを指定した場合、要素は可能な限り幅を埋め尽くし、親要素から割り当てられたスペースをすべて使用します。ただし、要素のコンテンツが幅を超える場合、指定した幅に収まるようにはなりません。

例えば、次のようなHTML要素があった場合、

<div class="container">
   <div class="fill-available">
     <p> some contents here</p>
   </div>
</div>

次のCSSを適用した場合、

.fill-available {
    -webkit-box-sizing: border-box;
    -webkit-fill-available: stretch;
    border: solid 1px black;
}

この要素<div class="fill-available">は、親要素<div class="container">から割り当てられたスペースをすべて使用し、コンテンツによらず必ず指定した幅に拡大します。

しかしながら、このプロパティは非標準で、主にWebkit系ブラウザで使用され、他のブラウザには対応していません。