Qual é o efeito de definir display: flex em um elemento?
display: flex
Todos os descendentes, em qualquer nível de aninhamento, se tornam itens de um único layout flex compartilhado.
O elemento se torna um flex container, e seus filhos diretos se tornam flex items.
Todos os elementos filhos são convertidos permanentemente em texto inline simples.
O elemento e todos os seus filhos ficam ocultos.