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;
min-width: fill-available;

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

<length>
最小幅を <length> で表します。負の値は無効です。
<percentage>
最小幅を、包含ブロックの幅に対する <percentage> で表します。負の値は無効です。

キーワード値

auto

自動的に最小の寸法を指定します。しかし、関連するレイアウトモジュールで定義されていない限り、使用値は0になります。後方互換性のため、 [CSS2] におけるすべての display 型、すなわちブロックおよびインラインボックス、インラインブロック、すべての表レイアウトボックスでは、このキーワードで解決される値はゼロになります。

max-content
コンテンツエリア固有の望ましい幅です。
min-content
コンテンツエリア固有の最小幅です。
fill-available
包含ブロックの幅から、それぞれ水平方向のマージン、境界、パディングを除いたサイズです。 (なお、一部のブラウザーは、このキーワードの旧称である available を実装しています。)
fit-content
min(max-content, max(min-content, fill-available)) と定義されています。

形式文法

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

table { min-width: 75%; }

form { min-width: 0; }

仕様書

仕様書 状態 備考
CSS Intrinsic & Extrinsic Sizing Module Level 3
min-width の定義
草案 キーワード max-content, min-content, fit-content, fill-available を追加 (以前は CSS3 Box および CSS3 Writing Modes の両方の草案でこれらのキーワードを定義していました。これらの草案は、本仕様書に置き換えられました)
CSS Flexible Box Layout Module
min-width の定義
勧告候補 キーワード auto を追加し、初期値として使用する
CSS Transitions
min-width の定義
草案 min-width がアニメーション可能として定義された
CSS Level 2 (Revision 1)
min-width の定義
勧告 初回定義
初期値auto
適用対象all elements but non-replaced inline elements, table rows, and row groups
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
min-widthChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
IE 完全対応 7Opera 完全対応 4
補足
完全対応 4
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Opera supports applying min-width to table elements.
Safari 完全対応 1WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 4
補足
完全対応 4
補足
補足 CSS 2.1 leaves the behavior of min-width with table undefined. Firefox supports applying min-width to table elements.
Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
autoChrome 完全対応 21
補足
完全対応 21
補足
補足 Chrome uses auto as the initial value for min-width.
Edge 完全対応 12
補足
完全対応 12
補足
補足 Edge uses auto as the initial value for min-width.
Firefox 完全対応 34
完全対応 34
未対応 16 — 22
補足
補足 Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
IE 未対応 なしOpera 完全対応 12.1
補足
完全対応 12.1
補足
補足 Opera uses auto as the initial value for min-width.
Safari 未対応 なしWebView Android 完全対応 37
補足
完全対応 37
補足
補足 Chrome uses auto as the initial value for min-width.
Chrome Android 完全対応 25
補足
完全対応 25
補足
補足 Chrome uses auto as the initial value for min-width.
Firefox Android 完全対応 34
完全対応 34
未対応 16 — 22
補足
補足 Firefox 18 and later (until the value was removed), used auto as the initial value for min-width.
Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ?
fit-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 3
接頭辞付き 補足
完全対応 3
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 11
完全対応 11
完全対応 6.1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 46Firefox Android 完全対応 4
接頭辞付き 補足
完全対応 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Firefox implements the definitions given in CSS3 Basic Box. This defines available and not fit-available. Also, the definition of fit-content is simpler than in CSS3 Sizing.
Opera Android ? Safari iOS 完全対応 11
完全対応 11
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 5.0
代替名
完全対応 5.0
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
max-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android ? Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
min-contentChrome 完全対応 46
完全対応 46
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 25
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Edge 未対応 なしFirefox 完全対応 66
完全対応 66
完全対応 3
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 44Safari 完全対応 11
完全対応 11
完全対応 2
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
WebView Android 完全対応 46
完全対応 46
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 46Firefox Android 完全対応 66
完全対応 66
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 43Safari iOS 完全対応 11
完全対応 11
完全対応 1
代替名
代替名 非標準の名前 min-intrinsic を使用しています。
Samsung Internet Android 完全対応 5.0
stretch
実験的
Chrome 完全対応 22
代替名
完全対応 22
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Edge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari 未対応 なしWebView Android 完全対応 4.4
代替名
完全対応 4.4
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Chrome Android 完全対応 25
代替名
完全対応 25
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Firefox Android 未対応 なしOpera Android 完全対応 14
代替名
完全対応 14
代替名
代替名 非標準の名前 -webkit-fill-available を使用しています。
Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報