Création d'éléments flexibles qui se chevauchent

Lors de la création d'une rangée horizontale d'éléments flexibles pouvant dépasser la largeur disponible, il est souvent souhaitable de les faire se chevaucher . Par défaut, flexbox réduira les éléments pour les adapter au conteneur.

Approche Flexbox

Pour obtenir un chevauchement, nous pouvons utiliser l'approche suivante :

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;

• Enveloppez chaque élément flexible dans un div .cardWrapper.
• Par défaut, définissez le .cardWrapper pour qu'il soit overflow: caché. Cela masquera tout débordement de la .card enfant.
• Utilisez :last-child ou :hover pour permettre au dernier élément ou aux éléments survolés d'afficher leur débordement.
• Définissez les éléments .card sur ont une largeur fixe et une largeur minimale pour éviter qu'ils ne soient réduits.
• Masquez tout débordement des éléments .card en utilisant overflow : caché.