¿Por qué minmax(0, 1fr) funciona para elementos largos mientras que 1fr no?
Entonces tengo esta cuadrícula:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
En el interior phay una cuerda súper larga sin espacios. divLos s son marcadores de posición con dimensiones fijas. Esto produce lo anterior:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
Pero cambiar minmax(0, 1fr)a 1frda esto:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
Se desborda de su padre y sale del tamaño de la pantalla. ¿Por qué no se comporta como minmax?
codepen
Aceptado
Porque 1fres equivalente a minmax(auto, 1fr), por defecto.
Cuando lo usas minmax(0, 1fr), es algo diferente a lo independiente 1fr.
En el primer caso, la pista no puede ser más pequeña que el tamaño del elemento de la cuadrícula ( el tamaño mínimo es auto).
En el segundo caso, la pista puede cambiar su tamaño a 0 ancho/alto.
Más detalles:
- Reconsiderar el significado de
1fr - Evite que el área de la cuadrícula se expanda provocando que toda la página se desplace
