css - initial - ¿Por qué el ancho máximo no anula el ancho mínimo?

viewport definicion

Question

Estoy tratando de crear un diseño receptivo en el que dos cuadros se sientan uno junto al otro si el tamaño de la pantalla lo permite, y los tengo debajo uno del otro si no lo hace. Si las casillas están una debajo de la otra, me gustaría que estén centradas en sus padres. He configurado un jsfiddle para demostrar el problema:

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

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

Intente cambiar el tamaño del panel ''resultado'' a menos de 350 px. Los elementos se superpondrán a sus padres.

Mi pregunta:

¿Por qué no se respeta el ancho máximo especificado, incluso después del ancho mínimo?

Answer 1

Debido a los estándares CSS :

El siguiente algoritmo describe cómo las dos propiedades influyen en el valor utilizado de la propiedad ''width'':

1. El ancho tentativo utilizado se calcula (sin ''min-width'' y ''max-width'') siguiendo las reglas de "Cálculo de anchos y márgenes".
2. Si el ancho utilizado provisional es mayor que ''max-width'', las reglas anteriores se aplican de nuevo, pero esta vez se usa el valor computado de ''max-width'' como el valor computado para ''width''.
3. Si el ancho resultante es menor que ''min-width'', las reglas anteriores se aplican de nuevo, pero esta vez se usa el valor de ''min-width'' como el valor calculado para ''width''.

Como tal, el ancho mínimo siempre ''gana''. Dentro de una regla CSS específica no hay precedencia de todos modos, todos los valores se aplican atómicamente. La precedencia solo se produce cuando una regla específica se aplica varias veces al mismo elemento, e incluso entonces se basa en la especificidad antes de considerar el orden de los archivos.