O problema
O Flexbox facilita muito a centralização.
Simplesmente aplicando align-items: centere justify-content: centerao contêiner flex, seus itens flexíveis serão centralizados vertical e horizontalmente.
No entanto, há um problema com esse método quando o item flexível é maior que o contêiner flexível.
Conforme observado na pergunta, quando o item flexível excede o contêiner, a parte superior se torna inacessível.
Para estouro horizontal, a seção esquerda fica inacessível (ou a seção direita, nos idiomas RTL).
Aqui está um exemplo com um contêiner LTR com justify-content: centere três itens flexíveis:
Veja o final desta resposta para uma explicação desse comportamento.
Solução # 1
Para corrigir esse problema, use as margens automáticas do flexbox , em vez de justify-content.
Com automargens, um item flexível transbordante pode ser centralizado vertical e horizontalmente sem perder o acesso a qualquer parte dele.
Então, em vez deste código no contêiner flex:
#flex-container {
align-items: center;
justify-content: center;
}
Use este código no item flexível:
.flex-item {
margin: auto;
}
Demonstração revisada
Solução 2 (ainda não implementada na maioria dos navegadores)
Adicione o safevalor à sua regra de alinhamento de palavras-chave, assim:
justify-content: safe center
ou
align-self: safe center
Na especificação do Módulo de alinhamento de caixas CSS :
4.4 Overflow Alinhamento: o safee unsafepalavras-chave e os limites de segurança de rolagem
Quando o [item flexível] for maior que o [recipiente flexível], ele excederá. Alguns modos de alinhamento, se respeitados nesta situação, podem causar perda de dados: por exemplo, se o conteúdo de uma barra lateral estiver centralizado, quando eles excederem, poderão enviar parte de suas caixas além da borda inicial da janela de visualização, que não pode ser rolada para .
Para controlar essa situação, um modo de alinhamento de estouro pode ser especificado explicitamente. Unsafeo alinhamento respeita o modo de alinhamento especificado em situações de estouro, mesmo que cause perda de dados, enquanto o safealinhamento altera o modo de alinhamento em situações de estouro, na tentativa de evitar a perda de dados.
O comportamento padrão é conter o assunto do alinhamento dentro da área de rolagem, embora, no momento da escrita, esse recurso de segurança ainda não esteja implementado.
safe
Se o tamanho do [item flexível] ultrapassar o [contêiner flexível], o [item flexível] será alinhado como se o modo de alinhamento fosse [ flex-start].
unsafe
Independentemente dos tamanhos relativos de [item flexível] e [container flexível], o valor de alinhamento fornecido é respeitado.
Nota: O Módulo de alinhamento de caixas é para uso em vários modelos de layout de caixas, não apenas flex. Portanto, no trecho de especificação acima, os termos entre colchetes realmente dizem "assunto de alinhamento", "contêiner de alinhamento" e " start". Usei termos específicos de flex para manter o foco nesse problema específico.
Explicação para limitação de rolagem do MDN:
Considerações sobre itens flexíveis
As propriedades de alinhamento do Flexbox fazem centralização "verdadeira", ao contrário de outros métodos de centralização em CSS. Isso significa que os itens flexíveis permanecerão centralizados, mesmo se transbordarem o contêiner flexível.
Às vezes, isso pode ser problemático, no entanto, se eles ultrapassarem a borda superior da página ou a borda esquerda, [...] pois você não pode rolar para essa área, mesmo se houver conteúdo!
Em uma versão futura, as propriedades de alinhamento serão estendidas para ter também uma opção "segura".
Por enquanto, se isso for uma preocupação, você poderá usar as margens para obter a centralização, pois elas responderão de uma maneira "segura" e pararão de centralizar se transbordarem.
Em vez de usar as align-propriedades, basta colocar automargens nos itens flex que você deseja centralizar.
Em vez das justify-propriedades, coloque margens automáticas nas bordas externas do primeiro e do último itens flexíveis no contêiner flexível.
As automargens "flexionam" e assumem o espaço restante, centralizando os itens flexíveis quando houver espaço restante e alternando para o alinhamento normal quando não houver.
No entanto, se você estiver tentando substituir justify-contentpela centralização baseada em margens em uma caixa flexível de várias linhas, provavelmente não terá sorte, pois precisará colocar as margens no primeiro e no último item flexível de cada linha. A menos que você possa prever com antecedência quais itens serão finalizados em qual linha, não será possível usar com confiabilidade a centralização baseada em margens no eixo principal para substituir a justify-contentpropriedade.