Olá o/
Esse comportamento foi reportado como um bug no Firefox.
margin
e padding
verticais declarados em %
deveriam ser calculados com base na largura do elemento pai. Esse é o comportamento esperado, certo? Porém, em flex-items, esses valores são calculados com base na altura do elemento flex-container. Se não houver um valor declarado para a propriedade height
do mesmo, margin e padding de seus flex-items não podem ser calculados, resultando em 0. Faça o teste no Firefox declarando um height qualquer para o flex-container e veja os valores sendo aplicados corretamente.
No Chrome, esses valores estão sendo calculados com base na largura do flex-container (que possibilita o cálculo de margin e padding mesmo sem um valor declarado). O que não está de acordo com a especificação que, como disse acima, propõe que os valores sejam calculados com base na altura do flex-container (para margin e padding verticais).
Concluindo, o bug na verdade é no Chrome, por não seguir o comportamento previsto na especificação, por mais que esteja "funcionando".
Obrigado pela dúvida!
Me ajudou a descobrir essa... peculiaridade dos browsers XD