なぜ、max-widthはmin-widthを上書きしませんか？

Question

私は、画面サイズが許せば、2つのボックスが隣り合っていて、そうでない場合は互いの下にあるような反応的なレイアウトを作成しようとしています。箱がお互いの下にある場合、私は彼らが親に中心を置くようにしたいと思います。私は、問題を示すためにjsfiddleを設定している：

http://jsfiddle.net/leongersen/KsU23/

width: 50%; 
min-width: 350px; 
max-width: 100%; 

が350px以下に「結果」ペインのサイズを変更してください。要素は親要素と重なります。

私の質問：

なぜそれが最小幅の後に来るにもかかわらず、光栄指定された最大幅ではないでしょうか？

もちろん、私はメディアクエリを使用することができますが、なぜこれが発生するのか知りたいのですが。ためCSS standardsの

Answer 1

：

以下のアルゴリズムは、2つのプロパティは「幅」プロパティの 使用される値に影響を与える方法について説明：

1. 仮の使用幅を算出する（なし'min-width'、 'max-width'）を計算します。
2. 仮の使用幅が 'max-width'より大きい場合は、上記のルールが再度適用されますが、今回は 'max-width'の計算値を 'width'の計算値として を使用して適用します。
3. 結果の幅が 'min-width'より小さい場合は、 のルールが再度適用されますが、今回は 'min-width'の値を 'width'の計算値の として使用します。

このように、最小幅は常に「勝」します。特定のCSSルール内には、とにかく優先順位はありません。すべての値がアトミックに適用されます。優先順位は、異なるルールがすべて同じエレメントに適用され、さらにファイル順序が考慮される前に特定のルールに基づいている場合にのみ発生します。