min-widthプロパティ

min-widthプロパティは要素の最小幅を指定するプロパティです。要素の最低限の幅を設定したいときに使用します。

min-widthプロパティに指定できる値

min-widthプロパティには次の値を設定することができます。

min-widthプロパティを「300px」、widthプロパティを「200px」で指定した場合の例です。
min-widthプロパティの指定で要素は少なくとも300pxの幅を持つので、widthプロパティで指定した200pxではなく300pxに調整されます。

.parent {
  width: 400px;
}
.box1 {
  width: 200px;
  min-width: 300px;
}

<div class="parent">
  <p class="box1">widthプロパティのテスト</p>
</div>

min-widthプロパティを「50%」で指定した場合の例です。
親要素の50%（今回の場合は400pxの50%で200px）を最小の幅とします。

.parent {
  width: 400px;
}
.box2 {
  width: 20%;
  min-width: 50%;
}

<div class="parent">
  <p class="box2">widthプロパティのテスト</p>
</div>