min-width

概要

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

min-width の値は、max-width および 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

flex アイテム向けの既定の最小サイズであり、他のレイアウトにおける既定値 0 よりも合理的な既定値を提供します。

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

仕様

ブラウザ実装状況

[1] CSS 2.1 では <table> における min-width の動作を、明示的に未定義としています。よってどのような動作も CSS2.1 に準拠します。新たな CSS 仕様書で動作を定義する可能性がありますので、Web 開発者は現在の特定の動作に依存すべきではありません。

[2] Gecko は CSS3 Basic Box で定義された内容を実験的に実装しています。これは fill-available ではなく available を定義しています。また fit-content の定義は、CSS3 本来のものよりシンプルです。

[3] WebKit は以前の提案である、キーワード intrinsic も実装しています。

[4] このキーワードは、若干シンプルな動作を実装しています。flex アイテムでは min-content を算出、その他すべてでは 0 を算出します。

関連情報

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