css - ¿Cómo es que minmax(0, 1fr) funciona para elementos largos mientras que 1fr no?
css3 css-grid (1)
Porque
1fr
es equivalente a
minmax(auto, 1fr)
, por defecto.
Cuando usas
minmax(0, 1fr)
, eso es algo diferente a
1fr
independiente.
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 el tamaño a un ancho / alto 0.
Más detalles:
-
Reconsiderar el significado de
1fr - Evita que el área de la cuadrícula se expanda causando que toda la página se desplace
Así que tengo esta cuadrícula:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
Dentro de
p
hay una cuerda super larga sin espacios.
div
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 cambiando
minmax(0, 1fr)
a
1fr
da esto:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
Se desborda de su padre y se sale del tamaño de la pantalla. ¿Por qué no se comporta como minmax?