css - Come mai minmax(0, 1fr) funziona per elementi lunghi mentre 1fr no?



css3 css-grid (1)

Perché 1fr equivale a minmax(auto, 1fr) , per impostazione predefinita.

Quando usi minmax(0, 1fr) , è qualcosa di diverso rispetto a 1fr autonomo.

Nel primo caso, la traccia non può essere inferiore alla dimensione della griglia (la dimensione minima è auto ).

Nel secondo caso, la traccia è libera di ridimensionare a 0 larghezza / altezza.

Più dettagli:

Quindi ho questa griglia:

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

All'interno di p c'è una stringa super lunga senza spazi. div sono segnaposto con dimensioni fisse. Questo produce quanto sopra:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

Ma cambiando minmax(0, 1fr) in 1fr ottiene questo:

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

Trabocca fuori dal suo genitore e lontano dalle dimensioni dello schermo. Perché non si comporta come minmax?

Codepen





css-grid