Flex shrink

Syntax

Class
Properties
flex-shrink-{value}
flex-shrink: {value};

Parameters

value
<number>
<div class="t1 flex flex-row w-320 bg-c-white p-16 shadow-4"> <div class="t1 flex-shrink-0 w-40% h-48 bg-c-blue mr-16"></div> <div class="t1 flex-shrink-0 w-40% h-48 bg-c-green mr-16"></div> <div class="t1 flex-shrink-0 w-40% h-48 bg-c-red"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Disable shrinking flex item.
t1 flex-shrink-0
.t1.flex-shrink-0 { flex-shrink: 0; }
Shrinking flex item by a factor of 2.
t1 flex-shrink-2
.t1.flex-shrink-2 { flex-shrink: 2; }