CSS3

CSS用関数

fit-content()

→●、mdn

指定された寸法を min(max-content, max(min-content, 引数)) の式に従って有効な範囲の寸法に収めます。

<length-percentage> ○

可用な空間を指定された引数に置換してから、内容が収まるサイズ用の公式を適用した結果 ― すなわち、次の結果 ― を利用する：

max( min-content, min( max-content, <length-percentage> ) )

この公式の <length-percentage> 引数は、<length-percentage> 値を単体で与えたときと正確に同じに解決される。

負な <length-percentage> 値は無効。

<DIV style="display:grid; width:250px; border:1px solid red; font-size:15px;
 grid-template-columns:40px fit-content(6ch) 80px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">ああああああああ</DIV>
 <DIV style="border:1px solid black;">3</DIV>
</DIV>

<DIV style="display:grid; width:160px; border:1px solid red; font-size:15px;
 grid-template-columns:40px fit-content(6ch) 80px;
">
 <DIV style="border:1px solid black;">1</DIV>
 <DIV style="border:1px solid black;">ああああああああ</DIV>
 <DIV style="border:1px solid black;">3</DIV>
</DIV>

コンテナを狭めてみた

min-content

関連する軸における最小内容サイズを利用する。これは、ボックスのブロック サイズ用には ― 他が指定されない限り ― ボックスの自動的サイズに等価になる。

max-content

関連する軸における最大内容サイズを利用する。これは、ボックスのブロック サイズ用には ― 他が指定されない限り ― ボックスの自動的サイズに等価になる。

テスト