min-width

min-width は CSS のプロパティで、要素の最小幅を設定します。これは width プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。

min-width の値が max-width および width の値より大きい場合は、min-width の値が要素の幅になります。

構文

/* <length> 値 */
min-width: 3.5em;

/* <percentage> 値 */
min-width: 10%;

/* キーワード値 */
min-width: max-content;
min-width: min-content;
min-width: fit-content(20em);

/* グローバル値 */
min-width: inherit;
min-width: initial;
min-width: unset;

値

<length>
min-width を絶対的な値で定義します。
<percentage>
min-width を包含ブロックの幅に対するパーセント値で定義します。
auto
ブラウザーが指定された要素の min-width を計算して選択します。
none
ボックスの寸法を制限しません。
max-content
内容物が推奨する min-width です。
min-content
内容物の最小の min-width です。
fit-content(<length-percentage>)
利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
ここで
<length-percentage> = <length> | <percentage>

例

table { min-width: 75%; }

form { min-width: 0; }

仕様書

仕様書 状態 備考
CSS Box Sizing Module Level 4
min-width の定義		 編集者草案
CSS Box Sizing Module Level 3
min-width の定義		 草案 キーワード max-content, min-content, fit-content を追加。
CSS Flexible Box Layout Module
min-width の定義		 勧告候補 キーワード auto を追加し、初期値として使用する
CSS Level 2 (Revision 1)
min-width の定義		 勧告 初回定義

初期値auto
適用対象置換要素でないインライン要素、テーブルの行、行グループを除くすべての要素
継承なし
パーセント値包含ブロックの幅に対する相対値
計算値指定されたパーセント値または絶対的な長さ
アニメーションの種類length または パーセント値, calc();

ブラウザーの互換性

BCD tables only load in the browser

関連情報