O problema
Em alguns navegadores, o <button>elemento não aceita alterações em seu displayvalor, além de alternar entre blocke inline-block. Isso significa que um <button>elemento não pode ser um flex ou um contêiner de grade, ou <table>também.
Além dos <button>elementos, você pode descobrir que essa restrição se aplica a elementos <fieldset>e <legend>também.
Veja os relatórios de bug abaixo para mais detalhes.
Nota: Embora eles não possam ser flex containers, os <button>elementos podem ser flex items.
A solução
Existe uma solução alternativa simples e fácil em vários navegadores para esse problema:
Envolva o conteúdo de buttonem a spane faça spano flex container.
HTML ajustado ( buttonconteúdo empacotado em a span)
<div>
<button>
<span>
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
CSS ajustado (direcionado span)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
Demonstração Revisada
Referências / relatórios de bug
Flexbox em um <button>bloqueia o conteúdo, mas não estabelece um contexto de formatação flexível
Usuário (Oriol Brufau): Os filhos do <button>são bloqueados, conforme determina a especificação do flexbox. No entanto, o <button>parece estabelecer um contexto de formatação de bloco em vez de flexível.
Usuário (Daniel Holbert): Isso é efetivamente o que a especificação HTML exige. Vários elementos de contêiner HTML são "especiais" e efetivamente ignoram seu displayvalor CSS no Gecko [além de se é em nível inline vs. nível de bloco]. <button>é um desses. <fieldset>e <legend>também.
Adicionar suporte para exibição: flex / grade e layout de conjunto de colunas dentro dos <button>elementos
Usuário (Daniel Holbert):
<button>não é implementável (por navegadores) em CSS puro, então eles são um pouco como uma caixa preta, da perspectiva de CSS. Isso significa que eles não reagem necessariamente da mesma maneira que um reagiria, por exemplo <div>
.
Isso não é específico do flexbox - por exemplo, não renderizamos barras de rolagem se você colocar overflow:scrollum botão, e não o renderizamos como uma tabela se você colocá display:table-lo.
Recuando ainda mais, isso não é específico para <button>. Considere <fieldset>e <table>que também têm um comportamento de renderização especial.
E elementos HTML old-timey como <button>e <table>e <fieldset>simplesmente não suportam personalizados displayvalores, excepto para o propósito de responder a pergunta muito alto de nível de "é este nível de bloco elemento ou inline-nível", para fluir outros conteúdos em torno do elemento .
Veja também: