Como esticar um filho flexível para preencher a altura do contêiner

Ao trabalhar com Flexbox, é comum encontrar o problema em que um elemento filho não se estende até a altura total do seu recipiente. Isso geralmente ocorre devido ao uso incorreto da propriedade height: 100%.

No Flexbox, a propriedade height: 100% pode ser problemática porque:

• O elemento pai precisa de um elemento pai fixo height, o que vai contra os princípios do Flexbox.
• Quando vários filhos estão presentes, usar height: 100% em um filho irá ignorar o outros.

A solução é remover a propriedade height: 100% e confiar no comportamento padrão do Flexbox. Por padrão, os itens flexíveis em uma direção de linha (o layout típico) alinham-se verticalmente com a propriedade align-items: stretch. Isso significa que o elemento filho será esticado automaticamente para preencher a altura disponível do contêiner.

Aqui está um exemplo que demonstra o uso correto sem altura: 100%:

  

  

    some

    cool

    text
  

Neste exemplo, o filho amarelo será esticado para preencher a altura do contêiner, independentemente da altura do texto do filho azul. Isso ocorre porque o valor padrão align-items: stretch garante que os itens flexíveis sejam esticados verticalmente para ocupar o espaço disponível.