EP14: Os lemas invisíveis do scroll bem feito
🧭 Mapa da Edição
📓 Scroll quebrado, mesmo com tudo certo? O que começou com um bug estranho no episódio passado virou um mergulho nos detalhes quase secretos do flex, minH: 0 e overflowY: auto.
🌊 IA criando jogos, Claude escrevendo blogs e Trump proibindo regulamentações sobre IA. Um mix de criatividade, autonomia (ou anarquia?) e tecnologia.
📦 Tesouros: um componente de upload com UX refinada, uma plataforma que transforma e-mails em webhooks, e a descoberta tardia (mas útil) do poder do Whisper.
📓 Entrada no Logbook
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?
📦 Treasure - Good Stuff
Precisa fazer integrações em cima de e-mails recebidos? Descobri, ontem, essa plataforma chamada inbound, você consegue transformar e-mails recebidos em chamadas webhooks! Tem uma versão gratuíta e open-souce, ainda não testei, mas irei! Se alguém testar antes… me avise.
Você sabia que o modelo de transcrição de áudio da OpenAI, o Whisper, é open-source? Eu não sei onde estive todo esse tempo, mas só esses dias que me toquei 😅. Há diversas variações bem interessantes na HuggingFace, além de ser fácil executar através do Ollama ou LMStudio. Vale tentar!
E agora um componente legal: FilePond! É para upload de arquivos com uma ótima UX e UI personalizavel, com plugins que enriquecem toda a dinâmica, além de possibilitar fazer upload logo após a seleção do arquivo, e com feedback de carregamento!