CSS3

プロパティ

max-width

→●、mdn

最大横幅。

［max-width／max-height］プロパティは、ボックスの［最大横幅（maximum width、略して max width）／最大縦幅（maximum height、略して max height）］を指定する。最大サイズ（maximum size、略して max size）は、これらの総称であり、文脈に応じて適切な方を指す。

<length-percentage> ○

［<length>／<percentage>］を利用して、ボックスのサイズを指定する。box-sizing プロパティは、［内容ボックス、ボーダーボックス］のどちらが計量されるかを指示する。

百分率は、ボックスの包含ブロック のサイズ ― 横幅、縦幅のうち適切な方 ― を基準に解決される。［当該の軸において、包含ブロックのサイズがボックスのサイズに依存する］場合に［百分率を解決するための特別な規則］については、関連する各種レイアウト モジュールを見よ。

負な値は無効。

<TEXTAREA style="border:1px solid red;
 max-width:150px;
">
</TEXTAREA>

<DIV style="width:200px; height:150px; border:1px solid black;">
 <TEXTAREA style="border:1px solid red;
  max-width:50%;
 ">
 </TEXTAREA>
</DIV>

none

ボックスのサイズは、制限されない。【すなわち、最大サイズは無限大／最小サイズは 0】

<TEXTAREA style="border:1px solid red;
 max-width:none;
">
</TEXTAREA>

ｂｒ８　

min-content

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

<TEXTAREA style="border:1px solid red;
 max-width:min-content;
">
</TEXTAREA>

<TEXTAREA style="border:1px solid red;
 max-width:min-content;
" cols=50>
</TEXTAREA>

max-content

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

<TEXTAREA style="border:1px solid red;
 max-width:max-content;
">
</TEXTAREA>

<TEXTAREA style="border:1px solid red;
 max-width:max-content;
" cols=50>あああああ
</TEXTAREA>

fit-content() ○

＝fit-content(<length-percentage>)

<TEXTAREA style="border:1px solid red;
 max-width:fit-content(100px);
">●●●
</TEXTAREA>

¶

<DIV style="width:200px; height:150px; border:1px solid black;">
 <TEXTAREA style="border:1px solid red;
  max-width:fit-content(50%);
 ">●●●
 </TEXTAREA>
</DIV>

¶

すべての事例において、使用値は、内縁サイズが負にならない所まで切り上げられる。

注記： min-content、max-content、fit-content() 値は、Level 3 による新たな値である。

注記： これにより、flex-basis プロパティも、これら新たなキーワードをとり得ることになる ― その値は width プロパティへの参照により定義されているので。

注記： この節は、以前は［stretch／fit-content］を［収納伸張サイズ／内容収納サイズ］を表現するキーワードとして定義していた。これらのキーワードは、可用な空間が不定な状況に より良く働くようにするため、Level 4 に先送りされた（追加の contain キーワードとともに ― それは、stretch と同様にふるまうが、選好縦横比 があれば、それを保全する）。

テスト