CSS 最小の幅を指定するサンプル(min-width)

CSSの最小の幅を指定するサンプルです。
min-widthプロパティを使用します。

min-width プロパティ

min-width : 値

値	説明
数値 + 単位	指定した単位で設定します。
数値 + %	包括ブロックに対する割合で設定します。
none	制限しません。(初期値)
値を継承しない

最小の幅を指定します。widthプロパティの値より小さくなることを防ぎます。
主に画面とスマホでの見え方の調整などのレスポンシブデザインで使用します。
→例：画面では丁度良く見えるがスマホで見ると小さくなりすぎてしまう。
　　　最低限の幅を確保したい。
以下はMDNのmin-widthプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/min-width

min-widthの使い所

１．以下のboxがあるとします。

親のbox1は、widthプロパティで500pxを指定しています。
子のbox2は、widthプロパティで30%を指定しています。
box2は、pxになおすと500☓0.3=150pxです。

２．親のbox1のwidthを小さくします。

box1のwidthプロパティを200pxにすると、box2は、widthは30%なのでpxになおすと200☓0.3 = 60pxとなります。
box2の幅が狭くなり、その結果文字が改行されてしまいました。

３．min-widthプロパティを追記します。
CSSでbox2に、min-widthプロパティの120pxを追記しました。

box2の最小の幅が120pxとなります。
その結果文字が改行されずに表示されました。

min-widthプロパティがある状態で、親のbox1のwidthを500pxにすると、box2は、500pxの30%(150px)に戻ります。
→min-widthは、最小限確保する幅です。

コード

以下は、上記のmin-widthを追記したコードです。

<style>
#box1{
	width:200px;
	border:1px solid #000;
}
#box2{
	width:30%;
	min-width:120px;
	border:1px solid #000;
	background-color:pink;
}
</style>

<div id="box1">box1
	<div id="box2">box2のテスト</div>
</div>