web-dev-qa-db-fra.com

CSS Grid layout max-content ne fonctionne pas comme prévu dans Firefox

J'ai utilisé la présentation CSS Grid pour créer une présentation de base pour une page et je travaillais à l'origine dans Chrome tout en faisant cela. Je l'ai testé maintenant aussi dans Firefox et j'ai remarqué un comportement que je ne comprends pas et qui ne semble pas suivre la spécification telle que je la comprends.

J'ai créé un exemple simplifié qui montre le comportement. Le problème est la hauteur de la div en-tête de recherche. Ceci est défini sur max-content et doit être aussi grand que nécessaire pour s'adapter à l'élément contenu. 

Cela fonctionne comme prévu dans Chrome 66, mais pas dans Firefox 52 ESR ou Firefox 62 Developer Edition (tous sous Linux). Dans Firefox, le div d'en-tête de recherche est plus grand et s'étend au-delà de la plage contenue. Cela ne se produit que s'il y a des éléments d'entrée dans la div search-sidebar, et plus je les ajoute, plus la div en-tête de recherche est volumineuse.

Est-ce que je comprends mal comment max-content est censé fonctionner? Pourquoi Firefox et Chrome se comportent-ils différemment dans ce cas? Et comment puis-je résoudre ce problème?

.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;
}
<div class="search">
  <div class="search-sidebar">
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
  </div>
  <div class="search-header">
    <span>some text here</span>
  </div>
  <div class="search-table"></div>
</div>

Voici à quoi ça ressemble dans Firefox:

 enter image description here

Et voici à quoi cela ressemble dans Chrome et à quoi il est destiné:

 enter image description here

htmlcsscss-grid
4
Mad Scientist

Je commencerais par un examen de la prise en charge du navigateur pour la valeur de dimensionnement max-content.

Voici quelques observations:

  • Les valeurs min-content, max-content et fit-content() sont toutes nouvelles. Ils ont été introduits dans CSS Intrinsic & Extrinsic Sizing Module Level 3 . Donc, le support complet du navigateur est déjà suspect.

  • Un examen des tables de support du navigateur sur caniuse.com révèle que max-content est totalement compatible avec Chrome, mais limité dans Firefox. Il nécessite également le préfixe -moz- pour fonctionner en FF.

  • Un examen de max-content dans MDN montre également que max-content fonctionne correctement dans Chrome, mais que son support est limité et qu'il nécessite le préfixe -moz- dans Firefox. MDN indique également que max-content est expérimental et ne doit pas être utilisé dans le code de production .

Ces éléments peuvent décrire la raison de la divergence Chrome/Firefox dans votre mise en page.

Mais, mis à part tout cela, vous n'avez même pas besoin de max-content pour que votre mise en page fonctionne. Vous pouvez utiliser max-content, min-content ou auto sur la première ligne.

Créez ensuite la deuxième ligne 1fr, ce qui oblige la deuxième à consommer toute la hauteur restante dans le conteneur et à libérer tout l’espace disponible de la première.

La valeur auto ne fait pas cela car elle fonctionne sous un algorithme différent de fr.

Donc, pour les raisons décrites ci-dessus, apportez cette modification simple à votre code:

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;
}
<div class="search">
  <div class="search-sidebar">
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
        <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
        <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
        <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
  </div>
  <div class="search-header">
    <span>some text here</span>
  </div>
  <div class="search-table"></div>
</div>

jsFiddle demo

3
Michael_B

Comme Ilya Streltsyn comments, le remplacement de auto par 1fr résout le problème. Tout navigateur prenant en charge display: grid prend en charge fr et il n'y a pratiquement aucune différence entre auto et une seule utilisation de fr: les deux font référence à la totalité de l'espace non réclamé.

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;
}
<div class="search">
  <div class="search-sidebar">
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
  </div>
  <div class="search-header">
    <span>some text here</span>
  </div>
  <div class="search-table"></div>
</div>

1
wordbug

Mad Scientist, je ne pense pas que votre code soit incorrect. La structure est parfaite, css et html.

J'ai testé votre code sur mon hôte local sur Edge, Chrome et Mozilla et ils fonctionnent correctement. le seul problème concerne IE 11 et Opera, ils ne prennent pas en charge la grille d'affichage.

0
Torjescu Sergiu