CSS3

プロパティ

min-width、min-height

→●、mdn（min-width、min-height）

最小横幅、最小縦幅。

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

【最小サイズは、最大サイズとともに、この訳による追加。他の仕様にも、この意味を表す用語として現れているため、追加している。】

注記： 初期値 auto は、新たに導入された ― [CSS2] における初期値は 0 であった。

各 値は：

<length-percentage> ○

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

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

負な値は無効。

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

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

auto

［min-width／min-height］においては、自動的な最小サイズ を指定する ― 加えて：

• 使用値は、関連するレイアウト モジュールにより他が定義されない限り、0 に解決される。
• 解決値は、後方互換性を得るため、[CSS2] による表示型 のボックス ― ブロック ボックス、行内ボックス、行内ブロック、すべてのテーブル レイアウト ボックス ― に対しては 0 になるとする。生成されるボックスが無いときにも 0 になるとする。

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

min-content

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

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

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

max-content

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

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

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

fit-content(<length-percentage>) ○

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

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

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

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

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

¶

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

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

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

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

テスト