Properti flex-shrink menetapkan faktor menyusut fleksibel dari item fleksibel. Flex shrink factor adalah <number> yang menentukan berapa banyak item flex akan menyusut relatif terhadap sisa item flex dalam wadah flex ketika ruang kosong negatif didistribusikan. Flex shrink factor dikalikan dengan basis flex (lihat flex-basis) ketika mendistribusikan ruang negatif. Nilai awal adalah nol (1), artinya item tidak menyusut secara default, dan angka negatif tidak valid.

Jika jumlah ukuran utama (lihat konsep dan terminologi) dari semua item fleksibel lebih besar dari ukuran utama wadah fleksibel, Anda dapat menentukan seberapa banyak Anda ingin “memperkecil” item fleksibel tersebut. Jumlah dimana ukuran utama item fleksibel melebihi ukuran utama kontainer adalah ruang negatif. Menggunakan properti flex-shrink, Anda dapat mendistribusikan ruang negatif ini ke item flex. Ruang negatif didistribusikan secara proporsional ke basis flex dikalikan dengan rasio flex-shrink, di mana basis flex adalah ukuran utama awal dari item flex, sebelum ruang bebas didistribusikan sesuai dengan faktor-faktor flex.

Misalnya, Anda dapat mendistribusikan ruang di antara item fleksibel sedemikian rupa sehingga salah satu item ini selalu mendapat ruang negatif dua kali lebih banyak daripada yang lain. Anda dapat melakukannya dengan mengatur nilai properti flex-shrink ke 2 (dua). Item dengan flex-shrink: 2 akan menyusut dua kali lebih banyak dari item dengan flex-shrink: 1 — ia mendapat ruang negatif dua kali lebih banyak daripada yang terakhir. Jadi, untuk setiap satu piksel yang menyusut item kedua, item pertama menyusut dua piksel. Semakin tinggi nilai flex-shrink, semakin banyak item akan menyusut relatif terhadap item lainnya.

Item dalam demo berikut diletakkan di dalam wadah yang memiliki ukuran utama 500px. Masing-masing dari empat item memiliki basis ukuran utama (atau basis fleksibel) sebesar 200px. Item (gabungan) jelas memiliki ukuran utama yang lebih besar daripada wadah. Karena ini adalah tata letak Flexbox, item akan secara otomatis menyusut agar muat di dalam wadahnya. Namun, menggunakan properti flex-shrink, Anda dapat mengontrol rasio item yang akan menyusut. Coba masukkan nilai yang berbeda untuk properti flex-shrink di demo berikut untuk melihat bagaimana elemen menyusut.

Perhatikan bahwa properti flex-shrink adalah animatable, kecuali antara nilai nol (0) dan nilai lainnya.

Properti flex-shrink biasanya digunakan bersama dengan sifat flex-basis dan flex-grow, dalam properti flex steno.

Contoh: