仕様

max-width<length-percentage> | none | min-content | max-content | fit-content(<length-percentage>)
一括/個別個別指定プロパティ
初期値none
適用対象width プロパティを受け入れるすべての要素
継承なし
百分率包含ブロックの幅を基準
計算値指定されたとおり、<length-percentage>値が計算されます
補足<length-percentage> = <length> | <percentage>
補足width プロパティの適用対象は、「置換されていないインラインを除くすべての要素」です。

max-width プロパティは、要素の最大幅を設定する個別指定プロパティです。
非継承プロパティで、初期値は none なので、省略時は none が指定値となります。

width プロパティの使用値が max-width プロパティより大きい場合に、上書きします。
min-width プロパティは max-width プロパティを上書きします。

<length> 値

  1. cdvSample010 > div { outline: solid 1px currentColor; }
  1. <div class="cdvSample010">
  2. <div style="">例</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

例
  1. max-width: 2em;
  2. font-size: 2em;

単位 em の値を指定しました。em は、font-size の計算値を用います。

例
  1. max-width: 4.8rem;
  2. font-size: 2em;

単位 rem の値を指定しました。rem は、ルート要素のfont-size の計算値を用います。
ルート要素には、font-size: 62.5%; を指定しています。

例
  1. max-width: 48px;
  2. font-size: 2em;

単位 px の値を指定しました。px は、1 ピクセルです。
(ブラウザなどの環境で文字サイズ 16px を想定しての表示例です。)

例
  1. max-width: 5vw;
  2. font-size: 2em;

単位 vw の値を指定しました。vw は、ビューポートの初期値の包含ブロックにおける幅の1%と同じです。

例

<percentage> 値

  1. cdvSample130 > div { outline: dashed 1px currentColor; box-sizing: border-box; width: 7em; padding: 1.0em; }
  2. cdvSample130 > div > div { outline: solid 1px currentColor; box-sizing: border-box; }
  1. <div class="cdvSample130">
  2. <div><div style="">例</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
パティングは、コンテンツ領域と境界領域に差を付ける為に記述しています。box-sizing は、割合の対象を判り易くする為に記述しています。

例
  1. max-width: 80%;

単位 % の値を指定しました。% は、包括要素のコンテンツ領域の幅 (width) に対しての割合です。

例

キーワード

  1. cdvSample010 > div { outline: solid 1px currentColor; }
  1. <div class="cdvSample010">
  2. <div style="">Japanese only...</div></div>

例示の雛型です。style属性を書き換えて例示しています。
輪郭線は、要素を視覚化する為に記述しています。

Japanese only...
  1. max-width: none;

キーワード none を指定しました。none は、ボックスのサイズに制限はありません。

Japanese only...
  1. max-width: min-content;

キーワード min-content を指定しました。min-content は、最小の固有の幅な値を選択します。

Japanese only...
  1. max-width: max-content;

キーワード max-content を指定しました。max-content は、望ましい固有の幅な値を選択します。

Japanese only...

CSS全体のキーワード

  1. cdvSample150 > div { outline: dashed 1px currentColor; box-sizing: border-box; max-width: 5em; padding: 1.0em; }
  2. cdvSample150 > div > div { outline: solid 1px currentColor; box-sizing: border-box; }
  1. <div class="cdvSample150">
  2. <div>親<div style="">子</div></div></div>

例示の雛型です。style属性を書き換えて例示しています。
パティングは、コンテンツ領域と境界領域に差を付ける為に記述しています。box-sizing は、割合の対象を判り易くする為に記述しています。

親
子
  1. max-width: inherit;

キーワード inherit を指定しました。inherit は、明示的な継承です。

親
子
  1. max-width: initial;

キーワード initial を指定しました。initial は、プロパティの初期値を設定します。max-width プロパティの初期値は none です。

親
子
  1. max-width: unset;

キーワード unset を指定しました。unset は、プロパティをリセットし継承プロパティなら継承，非継承プロパティなら初期値を設定します。max-width プロパティは非継承プロパティなので初期値の none を設定します。

親
子