min-width

min-width は、要素の最小幅を指定する CSS プロパティです。 width プロパティの 使用値 が、min-width で指定した値を下回らないようにします。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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; }

仕様書

ブラウザーの対応

関連情報

• width, max-width
• ボックスモデル, box-sizing