ボックス

min-width

min-width は要素の幅の下限を決めます。width で決めた幅や、親や中身から決まる幅がそれより狭くなっても、min-width より狭くはなりません。

構文

auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>)

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  width: 120px;
  min-width: 200px;
}

min-width200px

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

200px などの長さや 50%：その幅より狭くしません。% は親の幅に対する割合です。
auto：ふつうは下限を決めません。初期値です。flex や grid の子要素では、中身がはみ出さない幅が自動で下限になります。
min-content・max-content・fit-content：中身から決まる幅を下限にします。min-content なら、最も長い単語がはみ出さない幅より狭くなりません。

このページのプレビューでは、width: 120px の箱に min-width を足しています。min-width のほうが広いときは min-width が勝ちます。max-width とぶつかったときも min-width が勝ちます。

プレビューの箱の右下のつまみで幅を縮めても、min-width より狭くはなりません。