Perché la larghezza massima non sostituisce la larghezza minima?

Question

Sto provando a creare un layout reattivo in cui due scatole si siedono l'una accanto all'altra se le dimensioni dello schermo lo consentono, e se le rispettano l'una con l'altra se non lo fa. Se le scatole sono una sotto l'altra, mi piacerebbe che fossero centrate sui loro genitori. Ho installato un jsfiddle per dimostrare il problema:

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

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

provare a ridimensionare il riquadro 'risultato' al di sotto di 350px. Gli elementi si sovrappongono ai loro genitori.

La mia domanda:

Perché non è il max-width specificato onorato, anche se si tratta dopo il min-width?

Potrei ovviamente utilizzare una query multimediale, ma mi piacerebbe sapere perché questo si verifica.

Answer 1

causa della CSS standards:

Il seguente algoritmo descrive come le due proprietà influenzano il valore usata del 'width':

1. La larghezza utilizzata sperimentale viene calcolata (senza 'min-width' e 'max-width') seguendo le regole in "Calcolo delle larghezze e dei margini " sopra.
2. Se la larghezza provvisoria utilizzata è maggiore di "larghezza massima", le regole sopra riportate vengono applicate nuovamente, ma questa volta utilizzando il valore calcolato di "larghezza massima" come valore calcolato per "larghezza".
3. Se la larghezza risultante è inferiore a "larghezza minima", le regole sopra vengono applicate nuovamente, ma questa volta utilizzando il valore di "larghezza minima" come il valore calcolato per "larghezza".

Come tale larghezza minima sempre "vince". All'interno di una specifica regola CSS non c'è comunque precedenza, tutti i valori sono applicati atomicamente. La precedenza si verifica solo quando regole diverse si applicano tutte allo stesso elemento, e anche in questo caso si basa sulla specificità prima di considerare l'ordine dei file.