Itens flexíveis desconsiderando margens e dimensionamento da caixa de borda

No flexbox, definindo flex: 1 1 33,33% e margem: 10px no flex itens, pode-se esperar três caixas por linha. No entanto, com flex-wrap: wrap, as caixas não encolhem para caber três por linha.

A razão está na natureza do dimensionamento da caixa: border-box. Embora esta propriedade inclua preenchimento e bordas nos cálculos de largura e altura, ela exclui margens. As margens são calculadas separadamente e, por padrão, os itens flexíveis têm flex-shrink: 1, permitindo que eles diminuam para caber no contêiner.

Para resolver esse problema, pode-se substituir o comportamento padrão definindo flex- encolher: 0. Isso evita que os itens flexíveis diminuam nas margens.

Outra solução é ajustar o valor da base flexível enquanto mantém o crescimento flexível: 1. Como não há necessidade de flex-basis para impor um envoltório devido ao consumo flexível de espaço livre, pode-se reduzir o valor para acomodar as margens. Ao definir flex: 1 1 26% e margin: 10px, por exemplo, os itens flexíveis agora se ajustam conforme o esperado.