Os lemas invisíveis do scroll bem feito
🧭 Esta é a edição #14 da minha newsletter Logbook for Devs.
Se curtir, assina lá pra acompanhar as próximas :)
No episódio passado, contei como um bug visual estranho me pegou de surpresa: marquei uma checkbox dentro de uma tabela, e o conteúdo do modal deu um salto bizarro… culpa do famigerado scroll anchoring.
Mas a verdade é que aquele bug foi só a cereja do bolo.
Ele me fez revisitar uma dúvida que aparece sempre que a gente tenta fazer scroll funcionar do jeito certo em modais com cabeçalho e rodapé fixos. E aí veio aquela pergunta clássica:
“Por que eu botei overflowY: auto e mesmo assim não scrolla?”
A resposta, infelizmente, não está numa única propriedade, mas numa dança coreografada entre flex, minHeight, e a colaboração da hierarquia inteira.
Então resolvi documentar. Transformei o padrão em lemas fáceis de lembrar, que funcionam como lembretes mentais quando a gente tá perdido naquele modal que simplesmente se recusa a scrollar.
📌 Lemas do scroll bem feito em modais
- 🔁 Scrolla quem tem
overflowY: auto,flex: 1eminHeight: 0 - 🗂 O
Contentprecisa serdisplay: flexcomflexDirection: column - 📏
flex: 1diz: “ocupe o espaço restante” - 🔓
minHeight: 0diz: “pode encolher até o mínimo” - 🧬 O pai também precisa liberar o encolhimento
- 💥
flex: 1semminH: 0quebra. Sempre. Nunca esqueça.
💡 O raciocínio por trás
A base é simples: Flexbox distribui altura proporcionalmente, mas só se todo mundo colaborar.
Se um container tiver min-height: auto (valor padrão), ele impede que o filho encolha, o scroll não acontece, e você fica ali, com cara de quem “fez tudo certo”, mas ainda assim está quebrado.
É aí que minHeight: 0 vira herói silencioso: ele permite que os elementos realmente usem o espaço que o flex: 1 promete. Sem isso, o navegador ignora seu overflow e a rolagem desaparece.
🧠 A metáfora dos três níveis
- 🧓 Avô (
Dialog.Content): define o limite da modal commaxHeight: 90vh - 👨 Pai (
Stack): diz “posso ocupar esse limite” comflex: 1,minHeight: 0 - 👶 Neto (
BodyContent): é quem realmente scrolla, comoverflowY: auto
Todos precisam cooperar. Nenhum pode bloquear o outro.
Se um deles esquecer a parte dele, o scroll quebra.
🧦 E por que a modal não cresce inteira com pouco conteúdo?
Porque maxHeight é só um limite, não um comando.
E flex-grow não força expansão — ele só ocupa o que sobra.
maxHeighté como um teto: “você pode chegar até aqui”
flex: 1é como um elástico: “se sobrar espaço, eu me estico”Mas se o conteúdo for curto, o elástico nem sente pressão.
Se quiser que a modal tenha tamanho fixo mesmo com pouco conteúdo, adicione um minHeight nos lugares certos.
Esse conjunto de lemas e ajustes resolve 99% dos problemas de scroll quebrado em modais. E evita aquele ciclo sem fim de “funcionou num lugar mas quebrou no outro”.
Fica aqui no Logbook, como uma continuação direta do episódio anterior, pra lembrar que, no front-end, até as técnicas certas precisam do contexto certo pra funcionarem.
🌊 Marés da semana
- A Microsoft Research apresentou o Muse, uma IA treinada com mais de 500 mil sessões de gameplay (sete anos de partidas!) capaz de criar novos cenários de jogos a partir de comportamento humano. Isso pode mudar tanto o desenvolvimento quanto os testes de jogos, imagina prever ações do jogador em sessões de QA com esse tipo de modelo no pipeline?
- A Antrophic lançou o Claude Explains, um blog escrito pelo próprio Claude. Sim, escrito pela IA. E olha… funciona! A leitura é agradável, didática, e com bons exemplos. Pode não substituir um dev sênior escrevendo doc, mas chega perto.
- E… polêmica no ar: Trump assinou uma ordem proibindo que qualquer estado americano regulamente IA por conta própria. Ou seja: carta branca geral pra inovação, ou pro caos, dependendo do ponto de vista. Gosto da liberdade criativa… mas também fico pensando: até onde vai isso sem um mínimo de responsabilidade coletiva?