Il layout massimo della griglia CSS non funziona come previsto in Firefox

Ho usato il layout Grid CSS per creare un layout di base per una pagina e ho lavorato originariamente in Chrome mentre lo facevo. L’ho testato ora anche in Firefox e ho notato un comportamento che non capisco e che non sembra seguire le specifiche come ho capito.

Ho creato un esempio semplificato che mostra il comportamento. Il problema è l’altezza del div di intestazione di ricerca. Questo è impostato su max-content e dovrebbe essere grande quanto necessario per adattarsi all’elemento contenuto.

Funziona come previsto in Chrome 66, ma non in Firefox 52 ESR o Firefox 62 Developer Edition (tutto su Linux). In Firefox il div di intestazione di ricerca è più grande e si estende oltre lo span contenuto. Questo succede solo se ci sono gli elementi di input nel div della barra laterale della ricerca, e più ne aggiungo, più div diventa search-header div.

Sto fraintendendo il modo in cui max-content dovrebbe funzionare? Perché Firefox e Chrome si comportano diversamente in questo caso? E come posso risolvere questo?

.search { display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; grid-template-rows: max-content auto; grid-gap: 10px; height: 95vh; width: 100%; align-self: stretch; background: #FFF; overflow: hidden; margin-top: 5px; } .search-sidebar { grid-column: 1 / 2; grid-row: 1 / 3; background: #CCFFFF; padding: 5px; } .search-header { grid-column: 2 / 3; grid-row: 1 / 2; background: #FFCCCC; padding: 5px; } .search-table { grid-column: 2 / 3; grid-row: 2 / 3; background: #FFFFAA; } 
  

Ecco come appare in Firefox:

inserisci la descrizione dell'immagine qui

Ed è così che appare in Chrome, e come è destinato a guardare:

inserisci la descrizione dell'immagine qui

Vorrei iniziare con una recensione del supporto del browser per il valore di ridimensionamento del max-content massimo.

Ecco alcune osservazioni:

  • I valori min-content , max-content e fit-content() sono tutti nuovi. Sono stati introdotti in CSS Intrinsic & Extrinsic Sizing Module Level 3 . Quindi il supporto completo del browser è già sospetto.

  • Una revisione delle tabelle di supporto del browser su caniuse.com rivela che il max-content ha pieno supporto in Chrome, ma solo un supporto limitato in Firefox. Richiede anche il prefisso -moz- per funzionare in FF.

  • Una revisione di max-content in MDN mostra anche che max-content funziona bene in Chrome, ma ha un supporto limitato e richiede il prefisso -moz- in Firefox. MDN dice anche che max-content è sperimentale e non dovrebbe essere usato nel codice di produzione .

Questi elementi possono descrivere il motivo della discrepanza di Chrome / Firefox nel tuo layout.

Ma mettendo tutto questo da parte, non hai nemmeno bisogno di max-content per far funzionare il tuo layout. Puoi utilizzare max-content , min-content o auto sulla prima riga.

Quindi crea la seconda riga 1fr , che forza la seconda riga a consumare tutta l’altezza rimanente nel contenitore, spremendo tutto lo spazio libero dalla prima riga.

Il valore auto non lo fa perché funziona con un algoritmo diverso da fr .

  • algoritmo di dimensionamento
  • algoritmo di dimensionamento auto

Quindi, per le ragioni sopra descritte, effettua questa semplice regolazione del tuo codice:

 grid-template-rows: auto 1fr; 
 .search { display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; grid-template-rows: auto 1fr; grid-gap: 10px; height: 95vh; width: 100%; align-self: stretch; background: #FFF; overflow: hidden; margin-top: 5px; } .search-sidebar { grid-column: 1 / 2; grid-row: 1 / 3; background: #CCFFFF; padding: 5px; } .search-header { grid-column: 2 / 3; grid-row: 1 / 2; background: #FFCCCC; padding: 5px; } .search-table { grid-column: 2 / 3; grid-row: 2 / 3; background: #FFFFAA; } 
  

Come commenta Ilya Streltsyn , la sostituzione di auto per 1fr risolve il problema. Qualsiasi browser che supporti display: grid supporterà fr , e non c’è praticamente alcuna differenza tra auto e un singolo uso di fr : entrambi si riferiscono alla totalità dello spazio non reclamato.

 grid-template-rows: max-content 1fr; 
 .search { display: grid; grid-template-columns: minmax(200px, 1fr) 4fr; grid-template-rows: max-content 1fr; grid-gap: 10px; height: 95vh; width: 100%; align-self: stretch; background: #FFF; overflow: hidden; margin-top: 5px; } .search-sidebar { grid-column: 1 / 2; grid-row: 1 / 3; background: #CCFFFF; padding: 5px; } .search-header { grid-column: 2 / 3; grid-row: 1 / 2; background: #FFCCCC; padding: 5px; } .search-table { grid-column: 2 / 3; grid-row: 2 / 3; background: #FFFFAA; } 
  

Scienziato pazzo, non penso che ci sia qualcosa di sbagliato nel tuo codice. La struttura è perfetta, sia in css che in html.

Ho testato il tuo codice sul mio localhost su Edge, Chrome e Mozilla e funzionano correttamente. l’unico problema è con IE 11 e Opera, non supportano la griglia di visualizzazione.