debugando um bug estranho de css grid

Peguei um daqueles bugs de CSS que faz você questionar suas escolhas de carreira. Um layout grid que ficava perfeito no Firefox mas quebrava completamente no Chrome. Clássico.

O problema

Eu tinha um grid simples de duas colunas:

.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
}

A coluna da esquerda tinha um bloco de código dentro. No Firefox, tudo certo. No Chrome, o bloco de código transbordava e empurrava o grid inteiro pra além da viewport.

Diagrama do que tava acontecendo:

Esperado:                    O que o Chrome fez:
┌──────────┬────────┐       ┌──────────────────┬────────┐
│  conteúdo│ sidebar│       │  conteúdo (transborda→→→→) │
│          │        │       │                  │ sidebar│
└──────────┴────────┘       └──────────────────┴────────┘

A solução

Depois de um tempo vergonhoso, achei a resposta. Grid items têm min-width: auto por padrão, o que significa que não vão encolher abaixo do tamanho do conteúdo. Adicionar min-width: 0 no grid item resolve:

.layout > * {
  min-width: 0;
}

Isso. Uma linha. O elemento pre dentro do grid item tava definindo o tamanho mínimo, e o grid obedecia feliz da vida.

Por que isso acontece

A spec do CSS Grid diz que grid items têm min-width: auto e min-height: auto por padrão. Pra maioria dos elementos tá de boa, é o mesmo que min-width: 0. Mas pra elementos com sizing intrínseco (tipo pre com uma linha longa de código, ou img), o auto resolve pro minimum width intrínseco do conteúdo.

Na real isso é útil em muitos casos: geralmente você não quer que imagens sejam esmagadas pra 0 de largura. Mas pra conteúdo de texto que deveria scrollar horizontalmente (tipo blocos de código com overflow-x: auto), quebra tudo.

A ironia é que a propriedade overflow só funciona quando o elemento consegue realmente ser menor que seu conteúdo. Com min-width: auto, não consegue.

Vídeo demonstrativo

Aqui um vídeo curto mostrando o antes/depois:

(vídeo placeholder, imagina o grid encaixando no lugar)

Lições aprendidas

1. Cheque min-width quando grid items transbordam.
2. Teste em múltiplos browsers. Firefox e Chrome lidam com sizing do grid de formas diferentes.
3. Leia a spec quando algo não faz sentido. A resposta geralmente tá lá.
4. Mantenha um diário de debugging. Eu peguei esse exato problema duas vezes e esqueci a solução nas duas.

A seção da spec completa do CSS Grid sobre automatic minimum size vale a leitura se você trabalha com grids regularmente.

---

Às vezes a solução é uma linha mas o entendimento leva horas. CSS é assim.