Así que tengo esta grilla:
+---------+------------------------------+---------+ | <div> | <p> - 1000 characters long | <div> | +---------+------------------------------+---------+ Dentro de p hay una cadena súper 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 cambiar minmax(0, 1fr) a 1fr da esto:
+---------+----------------------------------------+ | <div> | <p> - 1000 characters long | <div> | +---------+----------------------------------------+Se desborda fuera de su padre y fuera del tamaño de la pantalla. ¿Por qué no se comporta como minmax?
Porque 1fr es equivalente a minmax(auto, 1fr) , por defecto.
Cuando usa 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 es libre de cambiar el tamaño a 0 ancho/alto.
Más detalles: