このボックスの枠は黒。
最小のボックスの枠は赤。
最大のボックスの枠は青。
このボックスの高さは 50% に設定されていますので、
ウィンドウをリサイズすると変動します。
しかし、最小・最大の枠を超えません。
min-, max- を指定したいボックス( id="foo" )がある場合、
そのボックスの直前に、
最小のボックス( id="foo_min" )
最大のボックス( id="foo_max" )
を配置する。
あとは CSS で、最小・最大のボックスに、それぞれ、最小・最大サイズを指定する。
このとき、最小・最大のボックスに、そのサイズ分の negative margin を指定する事。
以上。
同様に min-width, max-width もできますが、
面倒なので、これを見ているあなたへの練習課題とします ;-p