Open Time

J’ai fini par mettre le doigt sur mon problème évoqué hier, celui où je disais que l’utilisation de la valeur 1fr pour dimensionner la 2e colonne posait problème.

Avec la CSS suivante :

#page {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 0;
    grid-template-columns: 18rem 1fr;
    grid-template-rows: min-content 1fr min-content;
  }

Voilà ce que j’obtiens avec un <pre><code> contenant des lignes un peu longues et pour lequel j’ai positionné un overflow-x: auto :

Une fois modifiée comme suit la CSS :

#page {
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 0;
    grid-template-columns: 18rem calc(100% - 20rem);
    grid-template-rows: min-content 1fr min-content;
  }

Où j’ai donc remplacé un 1fr — censé représenter l’espace disponible, donc réduit la la largeur de la 1re colonne, soit 18rem, plus la gouttière de 2rem — par un calc(100% - 20rem) — 20rem représentant la somme de la largeur de la 1re colonne et de la gouttière qui sépare les deux —, ce qui théoriquement devrait revenir au même, pourtant non.

J’obtiens un affichage pertinent :

Bug d’implémentation ou feature ? D’ailleurs que ce soit Chrome ou Firefox, le problème est identique, alors que Safari (version Technology Preview) gère ça correctement !

J’ai créé deux exemples qui illustrent la différence de comportement sur Codepen.io :

• Celui qui foire
• Celui qui fonctionne