max-width：要素の幅の最大値を指定する

max-widthプロパティの説明

CSSのmax-widthプロパティは、要素の幅の最大値を指定します。widthによる幅の指定がmax-widthの値を上回る場合は、これを打ち消します。逆に要素の幅がmax-widthに達していない時、その寸法を維持します。

要素の幅の最小値は、min-widthで指定します。

max-widthに指定できる値

<length>

CSSで使用できる長さを表すデータ型の値です。数値と単位を組み合わせた絶対値を指定できます。

<percentage>

包含ボックスの幅を対象とした割合を示す値です。正の数値とパーセントで表します。

none

ボックスの寸法を制限しません。

max-content

要素に含まれる内容が必要とする最大の幅を要求します。

min-content

要素に含まれる内容が必要とする最小の幅を要求します。

fit-content(<length-percentage>)

利用可能な空間に対してfit-contentの式で計算を行い、指定された引数に置き換えます。結果は、min(max-content, max(min-content, <length-percentage>))と同じになります。

max-widthの使い方とサンプルコード

max-widthプロパティの構文は以下の通りです。

/* <length>値 */
max-width: 100px;
max-width: 10rem;

/* <percentage>値 */
max-width: 50%;
max-width: 33.3%;

/* キーワード値 */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content(10rem);

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

max-widthの実例

それでは実際にmax-widthプロパティの書き方を見ていきましょう。以下の例は、widthで幅300pxの指定を行ったボックスに、max-widthで制限を加えています。max-widthの値が、指定された高さを下回る場合はこれを制御し、上回る場合は指定された通りの寸法となります。

<div class="samp_box">
	<div class="mw_1">
		width: 300px;<br>
		max-width: 200px;
	</div>
	<div class="mw_2">
		width: 300px;<br>
		max-width: 300px;
	</div>
	<div class="mw_3">
		width: 300px;<br>
		max-width: 400px;
	</div>
</div>

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > div {
	width: 300px;
	margin: 1rem auto 0;
	padding: .3rem;
	background: #fff;
}
.mw_1 {
	max-width: 200px;
}
.mw_2 {
	max-width: 300px;
}
.mw_3 {
	max-width: 400px;
}