ボックスなどの横幅を指定したいなら、widthプロパティに望みの値や割合を書けば良いだけです。
しかし、横幅の上限(最大幅)や下限(最小幅)を指定して、広さの範囲を制限したいこともあります。
例えば、

• 横幅の基本は「親要素の80％」にするが、1,200ピクセルは越えないようにしたい。
• 横幅の基本は「親要素の50％」にするが、300ピクセルよりは狭くならないようにしたい。

などの場合です。
このような上限幅・下限幅を指定するために、max-widthプロパティと、mix-widthプロパティがあります。

横幅の上限を指定して、広くなりすぎるのを防ぐ例

以下のボックスは、横幅80％で表示されますが、最大値を700ピクセルに制限しています。
ブラウザのウインドウを広げてみて下さい。700ピクセルよりは広くはなりません。

上記のサンプルを作るCSSソースは以下の通りです。横幅の上限(最大値)を指定するために、max-widthプロパティを併記しています。

p {
   width: 80%; /* 横幅 */
   max-width: 700px; /* 横幅の最大値 */
   border: 1px solid #cc0000; /* 枠線 */
   background-color: #ffcccc; /* 背景色 */
}

「width: 80%」を指定しているので、このボックスの横幅は「親要素の横幅」の80%になります。が、同時に「max-width: 700px」を指定しているため、横幅の最大値は700ピクセルになり、それ以上は広がりません。

横幅の下限を指定して、狭くなりすぎるのを防ぐ例

以下のボックスは、横幅50％で表示されますが、最小値を250ピクセルに制限しています。
ブラウザのウインドウを狭めてみて下さい。250ピクセルより狭くはなりません。

上記のサンプルを作るCSSソースは以下の通りです。横幅の下限(最小値)を指定するために、min-widthプロパティを併記しています。

p {
   width: 50%; /* 横幅 */
   min-width: 250px; /* 横幅の最小値 */
   border: 1px solid #0000cc; /* 枠線 */
   background-color: #ccccff; /* 背景色 */
}

「width: 50%」を指定しているので、このボックスの横幅は「親要素の横幅」の50%になります。が、同時に「min-width: 250px」を指定しているため、横幅の最小値は250ピクセルになり、それ以上は狭くなりません。

横幅の上限と下限を同時に指定して、表示可能なサイズの範囲を制限することも可能

上限を指定するmax-widthプロパティと、下限を指定するmin-widthプロパティは、同時に記述することも可能です。
例えば以下のように記述しておけば、基本は横幅を描画領域全体に広げる(＝width:100%;)ものの、最小幅が400pxを下回らないようにし、最大幅が800pxを上回らないようにできます。

p {
   width: 100%; /* 横幅 */
   max-width: 800px; /* 横幅の最大値 */
   min-width: 400px; /* 横幅の最小値 */
}

ちなみに、横幅ではなく高さの上限を指定するmax-heightプロパティ、下限を指定する、min-heightプロパティもあります。

(更新日：2016年03月16日)