Flexbox

Comprendre le principe de flexibilité des boîtes

flex-shrink

la propriété flex-shrink fait la même chose que flex-grow mais pour réduire les éléments dans une flexbox trop petite.

La valeur de flex-shrink sur les items situés dans un contexte flex est fixée à 1, si la dimension globale de l’ensemble d’items flex dépasse la taille de son conteneur, les items rétrécissent pour pouvoir entrer dans le container. Pour corriger cela, ajoutez flex-shrink: 0 à chaque item qui doit conserver une dimension fixe.

Les items flexibles sont réglés d’une manière qui leur permet de s’agrandir (grow) ou de rétrécir (shrink), et le dépassement de contenu (overflow) est traité si nécessaire.

À retenir : La propriété flex est un raccourci pour les propriétés : flex-grow | flex-shrink | flex-basis.
Exemple:
.element {
flex: 1 1 100px;
}