Criando itens flexíveis sobrepostos

Ao criar uma linha horizontal de itens flexíveis que podem exceder a largura disponível, geralmente é desejável que eles se sobreponham . Por padrão, o flexbox reduzirá os itens para caber no contêiner.

Abordagem Flexbox

Para conseguir a sobreposição, podemos utilizar a seguinte abordagem:

overflow: visible;

width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

• Envolva cada item flexível em uma .cardWrapper div.
• Por padrão, defina o .cardWrapper para ter overflow: oculto. Isso ocultará qualquer estouro do .card filho.
• Use :last-child ou :hover para permitir que o último item ou itens pairados exibam seu estouro.
• Defina os itens .card como têm largura fixa e largura mínima para evitar que sejam encolhidos.
• Oculte qualquer estouro dos itens .card usando overflow: hidden.